JavaScript高级程序设计40.pdf
DOM0级事件处理程序
就是将一个函数赋值给一个事件处理程序属性，具有简单、跨浏览器优势，首先必须取得一个操作对象的引用，每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写
var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert("Clicked");
};
使用DOM0级方法指定的事件处理程序被认为是元素的方法，这些事件处理程序在元素的作用域中运行，this引用当前元素
btn.onclick=null; //删除事件处理程序
DOM2级事件处理程序
“DOM2级事件”定义了2个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有的DOM节点中都包含这两个方法，接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值true表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调用事件处理程序
btn.addEventListener("click",function(){
alert(this.id);
},false);
如果为一个元素添加多个事件处理程序，则会按照它们的顺序依次触发
通过addEventListener()添加的方法只能通过removeEventListener()移除，添加的匿名函数无法移除（上例就是个匿名函数）
IE事件处理程序
IE有两个类似的方法attachEvent()和detachEvent()，接收2个参数：事件处理程序名称和事件处理程序函数，IE8及之前值支持事件冒泡
btn.attachEvent("onclick",function(){
alert("Clicked");
});
注意，这里是“onclick”，而非之前的“click”
attachEvent()方法与DOM0级主要区别在于：attachEvent()方法的事件处理程序在全局作用域中运行，this等于window；如果添加多个方法，IE会按照与addEventListener()相反的方向执行（从下往上）。
detachEvent()和removeEventListener()移除的条件类似，必须提供相同的参数，并且匿名函数不能被移除
跨浏览器的事件处理程序
职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法
创建一个addHandler()方法，它属于EventUtil对象，接收3个参数：要操作的元素、事件名称和事件处理程序函数，还有一个与之对应的removeHandler()方法
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("myBtn");
var handler=function(){
.....
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);