JavaScript的event对象用来描述JavaScript的事件,它主要作用于IE和NN4以后的各个浏览器版本中。event对象代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。一旦事件发生,便会生成event对象,如单击一个按钮,浏览器的内存中就产生相应的event对象。
1.在IE中引用event对象
在IE中,event对象被作为window对象属性访问:
window.event
由于window引用部分是可选的,因此脚本像全局引用一样对待event对象:
event.propertyName
这样,一个事件处理程序的任何语句在不进行特殊预处理和初始化的情况下,都可以访问event对象。
2.在W3C中引用event对象
在W3C事件模型中,event对象引用比较复杂。在多数情况下,必须明确地将event对象作为一个参数传递到事件处理函数中。event对象有时自动作为参数传递,这依赖于事件处理函数如何与对象绑定。
如果使用原始的方法将事件处理函数与对象绑定(通过元素标记的一个属性),则必须把event对象作为参数传递。例如:
onKeyUp= "example(event)"
这是在W3C模型中唯一像全局引用一样明确引用event对象的方式,这个引用只作为事件处理函数的参数,在别的内容中不起作用。如果有多个参数,则event对象引用可以以任意顺序排列,例如:
onKeyUp= "example(this,event)"
与元素绑定的函数定义应该有一个参数变量来“捕获”event对象参数:
function example (widget,evt){…}
还可以通过其他方式将事件处理函数绑定到对象(在NN6+中,使用属性赋值和W3C DOM的addEventListener()方法),将这些事件处理函数的引用赋给文档中所需的对象,例如:
document.forms[0].someButton.onKeyUp= example;
document.getElementById(“myButton”).addEventListener("KeyUp",example,false);
通过这些方式进行事件绑定可以防止自己的参数直接到达调用的函数。但是,W3C浏览器自动传送event对象的引用并将它作为唯一参数,这个event对象是为响应激活事件的用户或系统行为而创建的。也就是说,函数需要用一个参数变量来“接收”传递的event对象:
function example (evt){…}
事件对象包含作为事件目标的对象(例如,包含表单控件对象的表单对象)的引用,从而可以访问该对象的任何属性。
3.event对象的属性
(1)altLeft属性
设置或获取左Alt键的状态。检索左Alt键的当前状态,返回值true表示关闭,false为不关闭。
[window.]event. altLeft
由于altLeft属性是boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作。
(2)ctrlLeft属性
设置或获取左Ctrl键的状态。检索左Ctrl键的当前状态,返回值true表示关闭,false为不关闭。
[window.]event. ctrlLeft
由于ctrlLeft属性是boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作。
(3)shiftLeft属性
设置或获取左Shift键的状态。检索左Shift键的当前状态,返回值true表示关闭,false为不关闭。
[window.]event. shiftLeft
由于这3个属性的值同样也都是boolean类型的,所以也可以将它们组合成一个条件在if语句中应用,并且也可以和altKey、ctrlKey和shiftKey属性同时使用。
(4)button属性
设置或获取事件发生时用户所按的鼠标键。
[window.]event.button
button 值 和说明
0 表示没有按键、1 按下左键(主键)、2 按下右键、3 同时按下左右键、4 按下中间键、5 同时按下左键和中间键、6 同时按下右键和中间键、
7 同时按下左键 右键 和中间键
button属性仅用于onmousedown、onmouseup、onmousemove事件,对于其他事件鼠标状态、enevt.button返回0;
(5)clientX属性
获取鼠标在浏览器窗口中的X坐标,该属性是一个只读属性,即只能获取到鼠标的当前位置,不能改变鼠标的位置。
[window.]event. clientX
(6)clientY属性
获取鼠标在浏览器窗口中的Y坐标,该属性是一个只读属性,即只能获取到鼠标的当前位置,不能改变鼠标的位置。
[window.]event. clientY
(7)X属性
设置或获取鼠标指针位置相对于CSS属性中有position属性的上级元素的X轴坐标。如果没有CSS属性中有position属性的上级元素,默认以body元素作为参考对象。
[window.]event. X
(8)Y属性
设置或获取鼠标指针位置相对于CSS属性中有position属性的上级元素的Y轴坐标。如果没有CSS属性中有position属性的上级元素,默认以body元素作为参考对象。
[window.]event. Y
(9)cancelBubble属性
检测是否接受上层元素的事件的控制。如果该属性的值是false,则允许被上层元素的事件控制;否则值为true,不被上层元素的事件控制。
[window.] event.cancelBubble[ = cancelBubble]
(10)srcElement属性
设置或获取触发事件的对象。srcElement属性是事件初始目标的HTML元素对象引用。由于事件通过元素容器层次气泡,可以在任何一个层次进行处理,因此由一个属性指向产生初始事件的元素是很有帮助的。
[window.]event. srcElement