跨浏览器的事件处理程序

"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;
　　　　}
　　}
}

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

转载于:https://www.cnblogs.com/xuniannian/p/7449335.html