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

原文地址:https://www.cnblogs.com/sdgjytu/p/3777733.html