事件处理程序的几种方式总结

本文主要总结一下关于事件处理的几种方式。

HTML事件处理程序

这种方式即写在HTML代码中的，如

<input type="button" value="click" onclick="alert('Clicked')">

点击该按钮就会弹出相应的对话框。
这种方式是将onclick作为元素属性，将执行的代码作为属性值来表达。但是这样的写法需要注意，为了避免解析不正确，需要使用经过转义的HTML语法字符。
当然也可以这样写：

<script>
     function showMessage(){
          alert("CLicked");
     }
</script>
<input type="button" value="click" onclick="showMessage()" />

这种事件处理程序的方式，所有浏览器都支持，兼容性很好。但是它也存在很多缺点。

• 这样会使HTML与JavaScript代码紧密耦合。若要改动代码，则要改动两个地方，非常麻烦，容易出错。
• 若上面的例子中script代码放在input的后面，可能会出现script还未解析完毕，但是点击了按钮的事情，这样容易出错。

DOM0级事件处理程序

这种方法的实现方式就是将一个事件处理函数赋值给一个事件处理程序的属性。如下所示：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
   alert("clicked");
}

这种方式很简单。这种方式的处理程序会在事件流的冒泡阶段被处理。
删除该事件也很简单：

btn.onclick = null;

DOM2级事件处理程序

这种方式有两个专门定义的方法来添加和删除事件，addEventListener()和removeEventListener()。都接受三个参数：处理的事件名称、处理事件的函数和一个布尔值（false表示在冒泡阶段调用处理函数，true表示在捕获阶段调用处理函数）。
举例如下：

var btn = document.getElementById("myBtn");
var handle1 = function(){
   alert("我是添加的第一个处理程序");
}
var handle2 = function(){
   alert("我是添加的第二个处理程序");
}
btn.addEventListener("click",handle1,false);
btn.addEventListener("click",handle2,false);

如上面的代码，使用DOM2级方法可以添加多个事件处理程序，并且添加的程序依次被触发。
移除事件时也很简单。

btn.removeEventListener("click",handle1,false);

此处要注意的一点：没办法对添加的匿名函数进行移除。因而若想移除绑定的事件函数，必须给它一个名字，如上面的两个handle。

IE事件处理程序

若要兼容IE8及更早的版本，我们需要用到这种方法。
IE事件处理程序也实现了两个方法：attachEvent()和detachEvent()。都接受两个参数：事件处理程序的名称和事件处理程序函数。需要注意的是：IE8及更早版本只支持事件冒泡，所以添加的事件处理程序都被添加到冒泡阶段。
举例如下：

var btn = document.getElementById("myBtn");
var handle1 = function(){
   alert("我是添加的第一个处理程序");
}
var handle2 = function(){
   alert("我是添加的第二个处理程序");
}
btn.attachEvent("onclick",handle1);
btn.attachEvent("onclick",handle2);

注意此处的区别：

• 它的参数是“onclick”而不是“click”。
• attach添加多个事件处理程序时，不是按添加顺序执行而是按相反的顺序被触发。
  删除事件的方式与DOM2级基本相同。

btn.detachEvent("onclick",handle1);

事件处理程序作用域

事件处理程序的方式主要就是以上几种。它们还有一个很重要的知识点，就是关于函数执行的作用域问题。
其中HTML事件处理程序、DOM0级及DOM2级事件处理程序中this值表示事件的目标元素。而IE事件处理程序会在全局作用域中运行，因此它的this等于window。

兼容的事件处理程序

使用能力检测方法，可以写出能保证在大多数浏览器下一致运行的处理事件代码。如下：

var EventUtil = {
   addHandler: function (element, type, handler){
      if(element.addEventListener){
         element.addEventListener(type,handle,false);
      }else if(element.attachEvent){
         element.attachEvent("on"+type, handle);
      }else{
         element["on"+type] = handler; 
      }
   },
 removeHandler: function(element,type,handler){
    if(element.removeEventListener){
       element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
       element.detachEvent("on"+type,handler); 
    }else{
       element["on"+type] = null;
    }
 }  
};