JS事件--事件处理程序之DOM2事件处理程序

“dom2级事件”定义了二个方法，用于处理指定和删除事件处理程序操作：addeventlistener()和removeeventlistener()。所有dom节点中都包含这二个方法，并且它们都接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序。如果是false，表示在冒泡阶段调用事件处理程序。

要在按钮上为click事件添加事件处理程序，可以使用下列代码：

var btn = documnent.getelementbyid('mybtn');
btn.addeventlistener('click', function(){
    alert(this.id);
}, false);

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

var btn = documnent.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 = documnent.getelementbyid('mybtn');
btn.addeventlistener('click', function(){
    alert(this.id);
}, false);

// 这里省略了其他代码

btn.removeeventlistener('click', function(){
    alert(this.id);
}, false)

在这个例子中，我们使用addeventlistener()添加了一个事件处理程序。虽然调用removeeventlistener()时看似使用了相同的参数，但实际上，第二个参数与传入addeventlistener()中的那一个是完全不同的函数。而传入removeeventlistener()中的事件处理程序函数必须与传入addeventlistener()中的相同，如下面的例子所示：

var btn = documnent.getelementbyid('mybtn');
var handler = function() {
    alert(this.id)
}
btn.addeventlistener('click', handler, false);
btn.removeeventlistener('click', handler, false);

重写后的这个例子没有问题，是因为在addeventlistener()和removeeventlistener()中使用了相同的函数；

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

ie9、firefox、safari、chrome和opera支持dom2xe事件处理程序