Js的event对象用来描述Js的事件，它主要作用于IE和NN4（Netscape Navigator4）以后的各个浏览器版本中。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){…}
这个参数变量名称没有任何限制，例子中，使用event对象或evt。在跨浏览器的脚本中使用，应避免使用event作为参数变量名，以避免与IE的event属性冲突。
还可以通过其他方式将事件处理函数绑定到对象（在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
由于shiftLeft属性是Boolean值，因此可以将该属性应用到if语句中，根据获取的值不同而执行不同的操作。
由于这3个属性的值都是Boolean类型的，所以可以将它们组合成一个条件在if语句中应用，并且也可以和altKey、ctrlKey和shiftKey属性同时使用。
例：将altKey、ctrlKey和shiftKey属性进行组合，组合成一个综合的条件，应用if语句判断当Ctrl键、shift键和Alt键同时按下是执行一个操作。
代码如下：
<script>
function example(){ //创建自定义函数
//应用if语句判断Ctrl键、shift键和Alt键是否同时被按下
if(window.event.ctrlKey && window.event.altKey && window.event.shiftKey){
//如果Ctrl键、Shift键和Alt键同时按下，则执行下面的内容
alert('Ctrl键、Shift键和Alt键同时按下啦!')
}
}
document.onkeydown = example;
</script>
（4）botton属性
该属性设置或获取事件发生时用户所按的鼠标键。
语法：
[window.]event.button
该属性的值如表所示。
| 值 | 说明 | 值 | 说明 |
|---|---|---|---|
| 0 | 表示没有按键 | 4 | 按下中间键 |
| 1 | 按下左键（主键） | 5 | 同时按下左键和中间键 |
| 2 | 按下右键 | 6 | 同时按下右键和中间键 |
| 3 | 同时按下左键和右键 | 7 | 同时按下左键、中间键和右键 |
当用户按下多个键时，每次按键都激活一个onmousedown事件。如果用户首先按下左键，则onmousedown事件激活，event.button属性值为1；如果此时按下右键，那么onmousedown事件再次发生，但event.button属性值为3。如果脚本同时按下两个按键执行特殊动作，那么就应该忽略单一按键动作，因为在处理过程中很可能激活单键事件，从而干扰目标行为。
button属性仅用于onmousedown、onmouseup和onmousemove事件。对于其他事件，无论鼠标状态如何，都返回0（如onclick）；
例子：在页面中的任何位置单击鼠标右键都弹窗“你点击右键了”的对话框，单击“确定”按钮后将进入到明日科技网站的首页。代码如下：
<script>
function gosite(){
if(event.button == 2){
alert('你点击右键了');
window.open('http://www.baidu.com/');
return false;
}
}
document.onmousedown = gosite;
</script>
（5）clientX属性
该属性获取鼠标在浏览器窗口中的X坐标，它是一个只读属性，即只能获取鼠标的当前位置，不能改变鼠标的位置。
语法：
[window.]event.clientX
（6）clientY属性
该属性获取鼠标在浏览器窗口中的Y坐标，它是一个只读属性，即只能获取鼠标的当前位置，不能改变鼠标的位置。
语法：
[window.]event.clientY
（7）X属性
该属性设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的X轴坐标。如果css属性中没有position属性的上级元素，默认以body元素作为参考对象。
语法：
[window.]event.X
如果鼠标事件触发后，鼠标移出窗口外，则返回的值为-1。这是个只读属性，只能通过它获取鼠标的当前位置，但不能用它来更改鼠标的位置。
（8）Y属性
该属性设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的Y轴坐标。如果css属性中没有position属性的上级元素，默认以body元素作为参考对象。
语法：
[window.]event.Y
如果鼠标事件触发后，鼠标移出窗口外，则返回的值为-1。这是个只读属性，只能通过它获取鼠标的当前位置，但不能用它来更改鼠标的位置。
（9）cancelBubble属性
该属性检测是否接受上层元素的事件的控制。如果该属性的值是false，则允许被上层元素的事件控制；否则值为true，则不被上层元素的事件控制。
语法：
[window.]event.cancelBubble[=cancelBubble]
（10）srcElement属性
该属性设置或获取触发事件的对象。srcElement属性是事件初始目标的HTML元素对象引用。由于事件通过元素容器层次进行处理，且可以在任何一个层次进行处理，因此由一个属性指向产生初始事件的元素是很有帮助的。
语法：
[window.]event.srcElement
通过该属性可以读、写属于该元素的属性，并调用它的任何方法。
真烧脑~~
网友评论