18. JavaScript event 对象

---

DOM 2 解决之道

---

JavaScript 的 event 对象用来描述 JavaScript 的事件，它主要用于 IE 和 NN4 以后的各个浏览器版本中。event 对象代表事件状态，如事件发生的元素，键盘的状态，鼠标位置和鼠标按钮状态。一旦事件发生，变灰生成 event 对象，如单击一个按钮，浏览器的内存中就产生相应的 event 对象。

---

1. 在 IE 中引用 event 对象
在 IE 中，event 对象被作为 window 对象属性访问：

window.event

由于 window 引用部分是可选的，因此脚本像全局引用一样对象 event 对象：

event.prototypeName

这样，一个事件处理程序的任何语句在不进行特殊预处理和初始化的情况下，都可以访问 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 作为参数变量名，以避免与 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) ctrLft 属性
该属性设置或获取左 Ctrl 键的状态。检索左 Ctrl 键的当前状态， 返回值 true 表示关闭，false 为不关闭。
语法：

[window.]event.ctrlLeft

(3) shiftLeft 属性
该属性设置或获取 Shift 键的状态。检索左 Shift 键的当前状态，返回值 true 表示关闭，false 为不关闭。
语法：

[window.]event.shiftLeft

由于这三个属性的值同样也都是 Boolean 类型的，所以可以将他们组合成一个条件在 if 语句中应用，并且也可以和 altKey, ctrlKey 和 shiftKey 属性同时使用。

function example(){    if(window.event.ctrlKey && window.event.altkey && window.event.shiftKey)    {        alert("同时按下三个键");        window.location.href = "http://www.baidu.com";//连接到百度    }}document.onkeydown = example; //应用onkeydown 事件输出函数 example()中的内容

---

4. button 属性
该属性设置或获取事件发生时用户所按的鼠标键。
语法：

[window].event.button

当用户按下多个键时，每次按键都激活一个onmousedown事件。如果用户首先按下左键，则onmousedown事件激活，event.button属性值为1；如果按下右键，那么onmousedown事件再次激活，event.button属性值为3。如果脚本同时按下两个按键执行特殊动作，那么就应该忽略单一按键动作，因为在处理过程中很可能激活单键事件，从而干扰目标行为。

注意：button属性仅用于 onmousedown,onmouseup和onmousemove事件。对于其他事件，无论鼠标状态如何，都返回0(如click)。

点击鼠标右键，弹出提示框，单击确定，跳到百度首页。

function gosite(){    if(event.button==2)    {        alert("欢迎你");        window.open("http://www.baidu.com");        return false;    }}document.onmousedown=gosite;

---

5. clientX 属性
该属性获取鼠标在浏览器窗口中的X坐标，它是一个只读属性，即只能获取鼠标当前位置，不能改变鼠标的位置。
语法：

[window].event.clientX

---

6. clientY 属性
该属性获取鼠标在浏览器窗口中的Y坐标，它是一个只读属性，即只能获取鼠标当前位置，不能改变鼠标的位置。
语法：

[window].event.clientY