为了保证处理事件能在大多数浏览器下一致的运行,只需关注冒泡阶段。第一个要创建的方法是addHandler(),它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件。第二个方法是removeHandler()方法,用于移除添加的事件。EventUtil创建方法和用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="btn">你可以改变世界!</div>
</body>
<script type="text/javascript">
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;
}
}
}
var btn = document.getElementById('btn');
var handler = function(){
console.log('这是JavaScript高程第354页');
}
EventUtil.addHandler(btn,'click',handler);
</script>
</html>
以上封装可以实现任何浏览器的绑定事件,敲一遍你就会了!