DOM2级事件处理程序，事件监听

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener() 和 removeEventListener()。所有DOM节点中都包含这两种方法，并且他们都接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
要在按钮上为click时间添加事件处理程序，可以使用下列代码：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
      alert(this.id);
},false);

上面的代码为一个按钮添加onclick 时间长护理程序，而且该事件会在冒泡阶段被触发。（因为最后一个参数是false）。与DOM0级方法一样，这里添加的事件处理程序也是与其依附的元素的作用于中运行。使用DOM2级方法处理事件处理程序的主要好处是可以添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click".function(){
      alert(this.id);
},false);
btn.addEventListener("click",function(){
      alert("Hello World");
},false);

这里为按钮添加两个事件处理程序。这两个事件处理程序会按照添加他们的顺序出发，因此首先会显示元素的ID，其次会显示“Hello World！”消息。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与处理程序时使用的参数想通。这也意味着通过addEventListener()添加的匿名函数将无法移除，如下面的例子所示。

var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

大多数情况下，都是将事件处理程序添加到时间流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册时事件处理程序。

IE中，attachEvent(),detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与时间处理程序函数。由于IE8及更早版本只支持时间冒泡，所以通过attachEvent（）添加的事件处理程序都会被添加到冒泡阶段。

DOM2级事件处理程序，事件监听

推荐阅读更多精彩内容