事件（一）——三种事件模型-优快云博客

使用传统的事件模型挂钩事件

对于指定元素，只能挂钩单个同类事件，如试图在两个JS文件中以window.onload = function()方式挂钩两个事件，只有后面的这个事件才有效。下面的代码利用传统的事件模型实现Search框的变化。

*this对象：对于传统事件模型和W3C事件模型，this关键字总是引用当前挂钩事件的元素。

使用W3C事件模型挂钩事件

在需要挂钩事件的对象上调用addEventListener()方法来挂钩事件。

object.addEventListener(event, function, useCapture);

在W3C时间模型中去掉了事件名称中的on前缀，但实际上它们指的是同一事件。其中第二个参数是时间发生时要执行的函数，可以是匿名函数。第三个参数几乎很少使用，大多数情况下是false（实际上是事件捕获和事件冒泡的区别，可参考最下方的连接）。

需要注意的是，IE浏览器并不支持W3C事件模型。示例代码（不完整）如： window.addEventListener( "load", function () { document.getElementsByTagName("a")[0].addEventListener( "click", function ($event) { window.open(this.href, "P2P", "width = 500, height = 500"); $event.preventDefault(); }, false ); }, false); 经测试，该代码在Chrome和FireFox中可以按预期执行，但在IE中没有任何变化。

Microsoft JScript的事件模型

该模型是Microsoft自己设计的。模型如下：

object.attachEvent(event, function);

乍看下，与W3C提供的事件模型十分相似，除了没有第三个参数。但实际上它们的功能并不是对等的。差别如下：

Microsoft事件模型中的参数event事件名称带有on前缀，这与传统事件模型中的事件名称完全相同；
Microsoft事件模型中的this关键字指向window对象，而不是挂钩事件的当前元素对象。这是一个非常大的差别；
Microsoft事件模型也不支持将event对象作为第一个参数传入事件监听函数，而是提供了一个全局的window.event对象。因此，若要在Microsoft事件模型中阻止默认行为的发生并不能调用$event.preventDefault()方法，而是将window.event对象的returnValue属性值设置为false即可，即window.event.returnValue = false;而且Microsoft事件模型也不支持其他浏览器所支持的event对象的那些标准方法。