EventUtil——跨浏览器的事件对象

• 首页
• 博客园
• 联系我

• 前言：什么是EventUtil？.
• EventUtil对象全见.
• addHandler方法.
• removeHandler方法.
• event对象与getEvent方法.
• target对象与getTarget方法.
• PReventDefault方法.
• stopPropagation方法.
• “相关元素”与getRelatedTarget方法.
• getButton方法.
• getWheelDelta方法.
• getCharCode方法.

• 留言评论
• 返回顶部

前言：什么是EventUtil？

在javaScript中，DOM0级、DOM2级与旧版本IE(8-)为对象添加事件的方法不同

为了以跨浏览器的方式处理事件，需要编写一段“通用代码”，即跨浏览器的事件处理程序

习惯上，这个方法属于一个名为EventUtil的对象

编写并使用该对象后，可保证处理事件的代码能在大多数浏览器下一致的运行

本文将围绕着EventUtil对象展开，并提供该通用对象代码以作参考分享

文章主要内容参考书籍为《Javascript高级程序设计》（[美]Nicholas C.Zakas）

若有纰漏，欢迎您留言指正

EventUtil对象全见

以下EventUtil对象代码亲测可用，并包含详细注释

[点击该对象中每一个方法名（绿色字体）可直接跳转到本文中介绍该方法的部分]

var EventUtil={   addHandler:function(element,type,handler){ //添加事件      if(element.addEventListener){          element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件      }else if(element.attachEvent){                    //使用IE方法添加事件         element.attachEvent("on"+type,handler);      }else{         element["on"+type]=handler;          //使用DOM0级方法添加事件      }   },     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;      }   },   getEvent:function(event){  //使用这个方法跨浏览器取得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;      }   },   stopPropagation:function(event){  //立即停止事件在DOM中的传播                                     //避免触发注册在document.body上面的事件处理程序      if(event.stopPropagation){         event.stopPropagation();      }else{         event.cancelBubble=true;      }   },   getRelatedTarget:function(event){  //获取mouSEOver和mouseout相关元素      if(event.relatedTarget){         return event.relatedTarget;      }else if(event.toElement){      //兼容IE8-         return event.toElement;      }else if(event.formElement){         return event.formElement;      }else{         return null;      }   },   getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个      if(document.implementation.hasFeature("MouseEvents","2.0")){         return event.button;      }else{         switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性            case 0:            case 1:            case 3:            case 5:            case 7:               return 0;  //按下的是鼠标主按钮（一般是左键）            case 2:            case 6:               return 2;  //按下的是中间的鼠标按钮            case 4:               return 1;  //鼠标次按钮（一般是右键）         }      }   },   getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值      if(event.wheelDelta){         return event.wheelDelta;      }else{         return -event.detail*40;      }   },   getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用      if(typeof event.charCode=="number"){         return event.charCode;      }else{         return event.keyCode;      }   }};

事实上，EventUtil是为了平衡不同浏览器间实现事件的差异或事件方法的差异而存在的

下文将详细介绍这些差异和使用EventUtil的各种方法

addHandler方法

这是EventUtil中最常用的方法，它的作用是为对象添加事件并保证兼容性

在DOM0级事件处理程序（下文均简称“DOM0级”）中

每个元素（包括windows和document）都有自己的事件处理程序属性（通常全部小写）

如常见的onload、onclick等

以Click事件为例（下同），DOM0级通常如下指定事件处理程序

var btn=document.getElementById("myBtn");btn.onclick=function(){ //指定事件处理程序   alert(this.id);      //"myBtn"};

在DOM2级事件处理程序（下文均简称“DOM2级”）中

指定事件处理程序的方法为addEventListener( )

它接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（大多数情况下是false）

（布尔值表示是在捕获阶段(true)还是冒泡阶段(false)调用事件处理程序）

DOM2级通常如下指定事件处理程序

var btn=document.getElementById("myBtn");//在外部定义好函数再传给addEventListener()，这样才可以通过removeEventListener()移除var handler=function(){    alert(this.id);};btn.addEventListener("click",handler,false);

在旧版本IE（代表IE8-，下文均简称“IE”）中

指定事件处理程序的方法为attachEvent( )

它接受两个参数：事件处理程序名称与事件处理程序函数

IE中通常如下指定事件处理程序

var btn=document.getElementById("myBtn");var handler=function(){   alert("Clicked");};//注意：第一个参数是"onclick"，而非DOM0的addEventListener()方法中的"click"btn.attachEvent("onclick",handler);

由上可见，DOM0级、DOM2级和IE中指定事件方法有很大不同

EventUtil对象中的addHandler方法正是为了处理这些差异而存在

在添加了EventUtil（指上文“EventUtil对象全见”中的代码，下同）后，可以如下所示为对象指定事件处理程序

var btn=document.getElementById("myBtn");var handler=function(){   alert("Clicked!");};EventUtil.addHandler(btn,"click",handler);  //调用已定义的EventUtil对象

就像这样，使用addHandler方法指定事件处理程序

即可兼容支持DOM0级、DOM2级的浏览器或IE浏览器

removeHandler方法

同样的，在DOM0级、DOM2级与IE中，移除事件的方法是不同的

在DOM0级中，在不再需要某对象的事件处理程序时（如页面销毁前），可以像下面这样简单的移除事件处理程序

btn.onclick=null; 

在DOM2级中，删除事件处理程序需要使用removeEventListener( )方法，如下所示

//这里的handler应与使用addEventListener指定事件处理函数时所用的外部函数相同btn.removeEventListener("click",handler,false);

而在IE中，删除事件则需使用detachEvent( )方法

btn.detachEvent("onclick",handler); 

因为这些差异的存在，才令EventUtil中有了removeHandler方法

在添加了EventUtil后，可以如下所示使用removeHandler方法方便地删除对象事件处理程序

//同样的，这里的handler应与使用addHandler指定事件处理函数时所用的外部函数相同EventUtil.removeHandler(btn,"click",hanlder);

event对象与getEvent方法

你可能已经发现了，在EventUtil中，很多方法的参数都是event

这个event其实是事件对象

兼容DOM（无论是DOM0级还是DOM2级）的浏览器会将一个event对象传入到事件处理程序中

这个event对象支持许多方法，下表列出了一些常用的方法以供参考

在兼容DOM的浏览器中，event对象可以如下面这个例子这样使用

var btn=document.getElementById("myBtn");var handler=function(event){   switch(event.type){      //使用event.type检测事件类型      case "click":         //若是Click事件         alert("Clicked");         break;      case: "mouseover":    //若是Mouseover事件         //使用event.target获取事件目标，并更改目标样式背景颜色         event.target.style.backgroundColor="red";         break;      case: "mouseout":     //若是Mouseout事件         event.target.style.backgroundColor="";         break;   }};btn.onclick=handler;  //使用DOM0级为对象添加事件处理函数btn.onmouseover=handler;btn.onmouseout=handler;

需要强调的是，以上使用event事件的方法仅适用于兼容DOM的浏览器