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