DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式

1.传统的方式是将一个函数赋值给一个事件处理程序属性。看看DOM0级方式例如：

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

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此程序中的this引用的是当前的元素btn，可以通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
也可以删除事件处理程序：btn.onclick = null; //删除事件处理程序。

2.在DOM2级事件中定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true时表明在捕获阶段调用事件处理程序，为false时表明在冒泡阶段调用事件处理程序。与DOM0级一样，this引用的也是当前的元素。
主要好处是：可以添加多个事件处理程序，例如：

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

会按添加的顺序触发，先显示ID，再显示me
通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除，并且移除时传入的参数要和添加处理程序的参数一样。这意味着通过addEventListener()添加的匿名函数将无法移除，如下面的例子：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);
btn.removeEventListener("click", function() { 
    alert(this.id);
}, false); //没有用,因为这个匿名函数和上面的匿名函数不是用一个函数。

要想删除匿名函数可以把事件处理程序放到变量中例如：

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

大多数情况下，为了最大限度的兼容各种浏览器，都是将事件处理程序添加到事件流的冒泡阶段，当特别需要在捕获阶段截获的时候才将事件处理程序添加到捕获阶段，如果不是特别需要，不建议在捕获阶段添加事件处理程序。

3.IE事件处理程序也有两个自己的方法：attachEvent()和detachEvent()。接受两个参数：事件名和事件处理程序函数。都是添加到冒泡阶段。
与DOM0级不同的是事件处理程序是在全局作用域中运行的，this等于window。例子：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function() {
    alert(this === window); //true
}); //第一个参数的事件名是"onclick"不是click

与addEventListener类似，也可以添加多个事件：

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

要删除事件处理程序，也是和addEventListener()一样：

var btn = document.getElementById("myBtn");
var handler = function() {
    alert("Clicked");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler); //有效

4.跨浏览器的事件处理程序
创建一个方法addHandler()，它的职责是综合考虑到DOM0级方法、DOM2级方法和IE方法添加事件，removeHandler()同理，addHandler接受3个参数：要操作的元素、事件名称和事件处理程序函数。封装到EventUtility对象里：

var EventUtil = {
    addHandler: function(element, type, handler) {
        //判断是否存在DOM2级方法
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } 
        //判断是否是IE版本
        else if(element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } 
        //判断是否存在DOM0级方法
        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;
        }
    }
};

//可以这样使用
var btn = document.getElementById("myBtn");
var handler = function() {
    alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);