跨浏览器的事件处理程序

Posted 丹妮娃儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨浏览器的事件处理程序相关的知识,希望对你有一定的参考价值。

"DOM2"级事件定义了两个方法用于处理指定和删除程序的操作:addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法,并且他们都接受三个参数:要处理的事件名、作为时间处理程序的函数和一个布尔值,最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。IE实现了与DOM类似的两个方法:attachEvent()和detachEvent(),他们接受相同的两个参数:时间处理程序名称和事件处理程序函数,由于Ie8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

事件对象:DOM中的事件对象event,IE中的事件对象window.event

事件目标:DOM中的事件对象event.target,IE中的事件对象event.srcElement

returnValue相当于DOM中的preventDefault()方法,他们的作用就是取消事件给定的默认行为

cancelBuble相当于DOM中的stopPropagation()方法,都是用来阻止事件冒泡的

这里的代码是兼容不同浏览器的写法

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;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue=false;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,element,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  },
    stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
}

本人正在学习和摸索中,如有错误,欢迎指正!

以上是关于跨浏览器的事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章

009天之跨浏览器的事件处理程序

跨浏览器的javascript事件的封装

跨浏览器之事件处理程序

Event Handler 事件处理程序 2 ---跨浏览器事件对象《高程3》

跨浏览器事件处理程序和事件对象

跨浏览器事件处理程序