javascript的事件模型

javascript给web带来了丰富多彩的交互行为，在一系列交互行为的背后，有两个特性给予了javascript强大的支持，一是DOM文档对象模型，通过它javascript有可能对网页的内容进行修改，从而达到动态的效果；另外一个就是javascript的事件处理模型，可以这么说，事件模型是一切交互行为的源头，用户与网站交互产生行为事件，javascript为事件添加event handler来给用户反馈。
通常来说，javascript的事件模型有三种，它们分别是NN4、IE4+和W3C/Safari。
这三种事件模型有什么不同呢？
下面我们来举一个简单的例子，或许我们在看别人的一些js代码时常会看到这样的代码：

function myFunc(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
// process event here
}

这是对事件响应对象的一种判断，由于三种事件模型存在着这样那样的差异，所以如果要做兼容性的开发，这种判断是必不可少的，在IE4+中，事件被直接赋予到一个window.event属性中，你可以直接使用；但是在基于标准的DOM事件模型中并不是这样，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口，在上述函数中，evt扮演的就是这个角色。
当然事件响应的不同只是一个方面，三者在事件发生节点、事件属性等各个方面都有着或多或少的差异，下面这张表很好的总结了三者对于事件对象的不同解释：

Event target	target	srcElement	target
Event type	type	type	type
X coordinate on page	pageX	*	pageX
Y coordinate on page	pageY	*	pageY
Mouse button	which	button	button
Keyboard key	which	keyCode	keyCode

标注*的属性值可以通过对 event.clientX + document.body.scrollTop 或者 event.clientY + document.body.scrollTop 进行求值来得到。

另外，在事件绑定方面，三者也有着不同的方法：
事件绑定方法I：绑定元素属性

<INPUT TYPE="button" NAME="myButton" VALUE="Click Here"
onClick="myFunc()">

把事件绑定到元素属性上有一个优点，即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值–this 关键字来传递。

事件绑定方法II：绑定对象属性
对于 NN3+ 和 IE4+ 这两类浏览器，脚本编程人员可以以脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性。对象属性名称是元素标识属性的小写形式，比如 onmouseover。
当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。因此，如果要为一个名为 myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为 myFunc() 的函数，则其赋值语句如下所示：

document.forms[0].myButton.onclick = myFunc;

事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识
在 IE4+ 中，Microsoft 对 <SCRIPT> 标识实现了自己的扩展，可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。支持这个绑定的标识属性（还没有被 W3C 批准为 HTML 的一部分）是 FOR 和 EVENT。
FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。然后，您必须把事件的名称（onmouseover，onclick，等等）分配给 EVENT 属性。在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个 ID 属性：

<INPUT TYPE="button" NAME="myButton" ID="button1" VALUE="Click Here">

脚本语句并不在函数中，而是在<SCRIPT> 标识中，如下所示：

<SCRIPT FOR="button1" EVENT="onclick">
// script statements here
</SCRIPT>

事件绑定方法IV：使用 IE5/Windows 的 attachEvent() 方法
早在 W3C DOM 工作组磨砺出标准的事件模型之前，attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。
attachEvent() 方法的用法如下所示：

elemObject.attachEvent("eventName", functionReference);

eventName 参数的值是表示事件名称的字符串，比如 onmousedown。functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：

document.getElementById("button1").attachEvent("onclick", myFunc);

事件绑定方法V：使用 W3C DOM 的 addEventListener() 方法
Safari 使用的是 W3C DOM 级别2定义的事件绑定机制，这个机制和 IE5/Windows 的 attachEvent() 方法很类似，但是有自己的语法。W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。这一点在 NN6 事件处理过程中经常得到体现，在本文的后面部分您将会看到。
addEventListener() 方法的语法如下所示：

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串（不带”on”前缀），比如 click，mousedown，和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发—综合起来称为事件的传播–最后由另一篇文章来描述。对于一个典型的事件侦听器来说，第三个参数应该为 false（假）。