事件（一）——三种事件模型

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

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

window.onload = function () {
    document.getElementById("tmpSearch").onfocus = function () {        if (this.value = "Search") {            this.value = "";            this.className = "tmpInputFocused";        }    };    document.getElementById("tmpSearch").onblur = function () {        if (!this.value) {            this.value = "Search";            this.className = "";        }    };}

*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提供的事件模型十分相似，除了没有第三个参数。但实际上它们的功能并不是对等的。差别如下：

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

更详细的请参考：http://www.trans4fun.org/2011/12/%E3%80%90javascript%E4%BA%8B%E4%BB%B6%E7%B3%BB%E5%88%97%E3%80%91%E4%BA%8B%E4%BB%B6%E9%A1%BA%E5%BA%8F/