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

  • 使用传统的事件模型挂钩事件
       对于指定元素，只能挂钩单个同类事件，如试图在两个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/

版权声明：本文为xiaowangba原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaowangba/archive/2012/09/20/6314787.html