跨浏览器事件处理程序

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>跨浏览器事件处理程序</title>
    </head>
    <body>
        <button id="myBtn">点击我</button>
    </body>
</html>

js部分

绑定事件

Chrome Firefox IE9等 addEventListener
IE8及IE8以下的浏览器 attachEvent

移除事件

Chrome Firefox IE9等 removeEventListener
IE8及IE8以下的浏览器 detachEvent

var EventUtil = {
    addHandler:function(element,type,handler){// 添加事件处理程序
        //绑定事件
        //Chrome Firefox IE9等     addEventListener 
        //IE8及IE8以下的浏览器     attachEvent 
        if(element.addEventListener){// DOM2级事件处理程序
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {// IE事件处理程序
            element.attachEvent("on"+ type,handler);
        } else{// DOM0级事件处理程序，事件流冒泡
            element["on"+type] = handler 
        }
    },
    removeHandler: function(element,type,handler){// 移除事件处理程序
        //移除事件
        //Chrome Firefox IE9等      
        //IE8及IE8以下的浏览器     
        if(element.removeEventListener){// DOM2级事件处理程序
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {// IE事件处理程序
            element.detachEvent("on"+type,handler);
        } else{ //DOM0级事件处理程序
            element["on"+type] = handler
        }
    }
}

测试

var btn = document.getElementById("myBtn");
    var handler = function(){
        alert("Clicked");
    }
    EventUtil.addHandler(btn,"click",handler);
  //EventUtil.removeHandler(btn,"click",handler);

跨浏览器事件处理程序

html部分

js部分

绑定事件

移除事件

测试

推荐阅读更多精彩内容