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);
