JavaScript 通用函数整理——添加/删除事件处理程序

参考《JavaScript 高级程序设计（第3版）》 《JavaScript DOM 编程艺术（第2版）》

实现平稳退化和渐进增强，就必须分离结构层、表示层、行为层。

定义跨浏览器的 EventUtil 对象：

2014/3/25

1、添加事件处理程序和删除事件处理程序

var EventUtil = {

    //添加事件处理程序
    addHandler: function(element, type, handler){
        //DOM2
        if(element.addEventListener){
            element.addEventListener(type, handler, false);
        }
        //IE8-
        else if(element.attachEvent){
            element.attacheEvent("on"+type, handler);
        }
        //DOM0
        else if(typeof element["on"+type] == "function"){
            var oldFunc = element["on"+type];
            element["on"+type] = function(){
                oldFunc();
                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
        }
    }

}

这两个函数的作用在于分离结构层和行为层。平常所见的οnclick="……" 就可以采用addHandler将处理函数添加到相应的元素中。

addHandler 函数包含3个参数，element 表示操作的目标元素，type 表示事件的名称（如 click、load 等），handler 表示事件处理函数。removeHandler 亦是如此。
注意： addHandler 中，DOM0 方法会将原本存在的处理函数覆盖，所以需要一个判断，将新的处理函数添加到原有的处理函数之后。
             removeHandler 中，DOM0 方法无法指定删除的处理函数，而是会将 element 和 type 对应的所有处理函数删除掉。