【BOM操作】JavaScript中的event对象之总结
来源:互联网 发布:淘宝扣分12分会怎么样 编辑:程序博客网 时间:2024/04/30 13:40
1. type:事件的类型,如onlick中的click;
2. srcElement/target:事件源,就是发生事件的元素;
3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)
4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)
5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置(这一定要定义position:relative;,值 可以是fixed absolute relative这几种);
6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;
8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )
9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;
上面支持IE
10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到(捕获)包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)
11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)
12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;
13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;
只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model)尚无正式标准。
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
对于 Internet Explorer 8、7、6、5:
或者
实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
亲自试一试
该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)
Object 对象
Object 对象自身用处不大,不过在了解其他类之前,还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中,所以理解了 Object 对象,就可以更好地理解其他对象。
Object 对象具有下列属性:
- constructor
- 对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数。
- Prototype
- 对该对象的对象原型的引用。对于所有的对象,它默认返回 Object 对象的一个实例。
Object 对象还具有几个方法:
- hasOwnProperty(property)
- 判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))
- IsPrototypeOf(object)
- 判断该对象是否为另一个对象的原型。
- PropertyIsEnumerable
- 判断给定的属性是否可以用 for...in 语句进行枚举。
- ToString()
- 返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。
- ValueOf()
- 返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。
注释:上面列出的每种属性和方法都会被其他对象覆盖。
var s=+newDate();
解释如下:=+是不存在的;
+new Date()是一个东西;
+相当于.valueOf();
看到回复补充一下.getTime()这个也是得到毫秒数
//4个结果一样返回当前时间的毫秒数
alert(+new Date());
alert(+new Date);
var s=new Date();
alert(s.valueOf());
alert(s.getTime());
- 【BOM操作】JavaScript中的event对象之总结
- 【BOM操作】JavaScript中的event对象之总结
- javaScript中的对象、BOM、DOM知识点总结
- JavaScript操作BOM对象
- JavaScript中的BOM对象
- JavaScript中的BOM对象
- Javascript之BOM对象
- Javascript之BOM对象
- JavaScript之BOM操作
- JavaScript中的event对象
- javascript之event对象
- javascript中的BOM知识点总结
- javascript的bom对象中的window对象
- JavaScript中的BOM对象和DOM对象
- JavaScript中的事件Event对象
- JavaScript中的Event对象用法
- Javascript中的事件--Event对象
- javaScript中的事件对象event
- 请问腾迅前端高级开发工程师
- android的自定义toolbar
- pool(一)——入门
- dot实现HuffmanTree动态可视化
- dubbo注册服务IP解析异常及IP解析源码分析
- 【BOM操作】JavaScript中的event对象之总结
- iOS 通知中心传值
- POJ 1084(DLX重复覆盖)
- Android入门1 ——系统介绍与框架
- hadoop常见问题及其解决办法
- 基于canvas绘图应用程序图标框架的建立
- 新浪分享授权登录
- android studio 代码快捷键
- usb setupapi.h(37) : error