跨浏览器的事件处理程序

要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。

第一个要创建的方法是addHandler(),它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。addHandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。

与addHandler()对应的方法是removeHandler(),它也接受相同的参数。这个方法的职责是移出之前添加的事件处理程序—无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法。

EventUtil的用法如下所示。

var EventUtil = {

    addHandler:function (element,type,handler) {
         if(element.addEventListener){
             element.addEventListener(type, handler,false);
         } else if (element.attachEvent) {
             element.attachEvent("on" + type,handler);
         }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;
         }
    }
};

这两个方法首先都会检测传入的元素中是否存在DOM2级方法。如果存在DOM2级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段)。如果存在的是IE的方法，则采取第二种方案。最后一种可能就是使用DOM0级方法(在现代浏览器中，应该不会执行这里的代码)。此时，我们使用的是方括号语法来将属性名指定为事件处理程序，或者将属性设置为null。

可以像下面这样使用EventUtil对象：

var btn = document.getElementById("myBtn");
var handler = function () {
     alert("Clicked"); 
};

EventUtil.addHandler(btn,"click",handler);

EventUtil.removeHandler(btn,"click",handler);

注意：DOM0级对每个事件只支持一个事件处理程序。