关于对跨浏览器实现的事件处理程序-优快云博客

本文介绍了一种跨浏览器实现DOM事件处理程序的封装方法。针对IE与其他主流浏览器之间的差异，通过使用addEventListener和attachEvent方法来统一事件绑定的方式，并提供了解除事件绑定的方法。

今天上网看了许多关于js的dom事件的内容。其中呢，对于跨浏览器实现的事件处理程序的封装方法很感兴趣。主要呢就是对于ie和其他主流的浏览器的差别。

var eventUtil = {
    //添加dom事件处理程序
    //添加的属性
    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;
        }
    },
    //删除dom事件处理程序
    removeHandler:function(element,type,handler){ 
        if(element.removerEventListener){
            element.removerEventListener(type,handler,false);
        }else if (element.detachEvent) {
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;
        }
    }
}

关于其中的element['on'+type]是因为element.后无法与字符串连接。而element[]等价于element.

关于是否加on，是因为ie的事件处理程序与别的浏览器不同导致。事件的type有的是dom2级中是click而由于ie8之前不兼容dom2级事件处理，则需要用type为onclick的ie时间处理程序。