跨浏览器的事件处理程序

var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){  //DOM2
      element.addEventListener(type,handler,false);// 第三个参数,如果是true,表示在捕获阶段调用事件处理程序,如果是false,表示在冒泡阶段调用。
    }else if(element.attachEvent){  //IE
      element.attachEvent('on'+type,handler);//注意参数是加on的,不是DOM标准的事件名
    }else{  //DOM0
      element['on'+type]=handler;//居然可以这样绑定 ,之前一直都是用element.onclick,哎自己太笨了
    }
  },
  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;
    }
  } };

DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序,会按照添加顺序处理。

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域,在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行,而在使用attachEvent()方法的情况下,事件处理程序在全局作用域中运行,因此this等于window(!!!!!!!!!!!!!!!)。attachEvent()也能添加多个事件处理程序,但是事件的执行顺序和添加顺序相反。

原文地址:https://www.cnblogs.com/em2464/p/8660177.html