addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都报站这两种方法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获节点调用事件处理程序；如果是false，表四在冒泡节点调用事件处理程序。

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

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

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

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

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：

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

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

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

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数。

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

 DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数，与IE不同，这些方法需要三个参数：事件名称，要分配的函数和处理函数用于冒泡阶段还是捕获阶段。如果事件处理函数是用于捕获阶段，第三个参数为true；用于冒泡阶段，则为false。下面是语法：
　　[object].addEventListener(“name_of_event”,fnHandler,bCapture);
　　[object].removeEventListener(“name_of_event”,fnHandler,bCapture);
　　var fnClick1=function(){
　　　　alert(“Clicked”);
　　};
　　var fnClick2=function(){
　　　　alert(“Also Clicked”);
　　};
　　var oDiv=document.getElementById(“div”);
　　oDiv.addEventListener(“click”,fnClick1,false); //添加事件
　　oDiv.addEventListener(“click”,fnClick2,false); //添加事件
　　oDiv.removeEventListener(“click”,fnClick1,false); //移除事件
　　oDiv.removeEventListener(“click”,fnClick2,true); //无法移除事件，因为没有指明捕获阶段
　　与IE一样，也可以为一个对象添加多个事件处理函数。显示效果是一样的。
　　如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventlistener()中指明是捕获阶段，才能正确地将这个事件处理函数删除。
如果使用传统方法直接给事件处理函数属性赋值，事件处理函数将被添加到事件的冒泡阶段。
直接赋值的一个很重要的不同点是，后续对事件处理函数的赋值将清除前面的赋值：
　　oDiv.οnclick=fnClick;
　　oDiv.οnclick=fnDifferentClick;
　　起初fnClick被赋给onclick事件处理函数，然后又被fnDifferentClick替换了。