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的浏览器

在IE中则有所不同

在IE中，使用DOM0级添加事件处理程序时，event对象作为window对象的一个属性存在，如下例子所示

btn.onclick=function(){   var event=window.event;   alert(event.type);  //"click"};

神奇的是，如果事件处理程序是使用attachEvent( )添加的，则又可以像在支持DOM的浏览器中一样

event对象又可作为参数传入事件处理程序函数中，如下例子所示

btn.attachEvent("onclick",function(event){   alert(event.type); //"click"});

而且，更神奇的是，在IE中，event对象的一些属性/方法还跟其它支持DOM的浏览器中不同，如下表

正是因为这些差异的存在，使得EventUtil中的getEvent方法应运而生

在添加了EventUtil后，可以如下“重点语句”所示获取event对象而无需担心上述差异导致的兼容问题

var btn=document.getElementById("myBtn");var handler=function(event){   event=EventUtil.getEvent(event); //重点语句};EventUtil.addHandler(btn,"click",handler); 

这样，就解决了event对象获取方式不同的问题

至于event对象的属性/方法差异，下文还会介绍其它方法进行处理

target对象与getTarget方法

在上一部分（“event对象与getEvent方法”）的介绍中，通过表格你可能已经发现

在IE中和其它兼容DOM的浏览器中，获取事件目标（target）的方法不同

在IE中，获取事件目标对象的方法为event.srcElement

而在其它兼容DOM的浏览器中，获取事件目标对象的方法却为event.target

getTarget方法正是为了处理这个差异而存在

在添加了EventUtil后，可以如下“重点语句”所示获取事件的目标（target）对象而无需担心上述差异导致的兼容问题

var btn=document.getElementById("myBtn");var handler=function(event){   event=EventUtil.getEvent(event);    var target=EventUtil.getTarget(event); //重点语句};EventUtil.addHandler(btn,"click",handler); 

preventDefault方法

在其它兼容DOM的浏览器中，阻止特定事件的默认行为只需使用event对象自带的preventDefault( )方法，如下所示

var link=document.getElementById("myLink");link.onclick=function(event){   event.preventDefault(); //DOM0级或DOM2级阻止事件默认行为的方法};

而在IE中，则需赋予event.returnValue的值为false才能阻止特定事件的默认行为

link.attachEvent("onclick",function(event){   event.returnValue=false; //IE中阻止事件默认行为的方法});

故在EventUtil中，存在一个preventDefault方法，用于统一上述差异

在添加了EventUtil后，可以如下“重点语句”所示阻止特定事件的默认行为而无需担心上述差异导致的兼容问题

var link=document.getElementById("myLink");var handler=function(event){   event=EventUtil.getEvent(event);   EventUtil.preventDefault(event); //重点语句};EventUtil.addHandler(link,"click",handler);

stopPropagation方法

有时候，我们需要取消事件的进一步捕获或冒泡，即停止事件在DOM层次中传播

兼容DOM的浏览器可以通过使用event对象自带的stopPropagation( )方法做到这一点

var link=document.getElementById("myLink");link.onclick=function(event){   event.stopPropagation(); //DOM0级或DOM2级取消事件的进一步捕获或冒泡的方法};

而在IE中，则需赋予event.cancelBubble的值为true

link.attachEvent("onclick",function(event){   event.cancelBubble=true; //IE中取消事件的进一步冒泡的方法});

EventUtil中的stopPropagation( )方法可以统一上述差异

在添加了EventUtil后，可以如下“重点语句”所示取消事件的进一步捕获或冒泡而无需担心差异导致的兼容问题

var link=document.getElementById("myLink");var handler=function(event){   event=EventUtil.getEvent(event);   EventUtil.stopPropagation(event); //重点语句};EventUtil.addHandler(link,"click",handler);

“相关元素”与getRelatedTarget方法

mouseover与mouseout有“主目标（主元素）”与“相关元素”的概念

因为在发生mouseover或mouseout事件时，还会涉及到其它元素

这两个事件都会涉及把鼠指针从一个元素（相关元素）移到另一个元素（主目标）内

具体点说

对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素是那个失去光标的元素

对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素是那个获得光标的元素

DOM通过event对象的relatedTarget属性提供了相关元素的信息

但IE8及之前的版本不支持relatedTarget属性，不过提供了其它类似属性支持

在mouseover事件触发时，IE的formElement属性中保存了相关元素

在mouseout事件触发时，IE的toElement属性中保存了相关元素

EventUtil中的getRelatedTarget方法正是为了平衡这些差异而存在

在添加了EventUtil后，可以像下面示例“重点语句”一样使用getRelatedTarget方法

var div=document.getElementById("myDiv");EventUtil.addHandler(div,"mouseout",function(event){   event=EventUtil.getEvent(event);   var target=EventUtil.getTarget(event);   var relatedTarget=EventUtil.getRelatedTarget(event); //重点语句   alert("鼠标离开了"+target.tagName+"元素而进入了"+relatedTarget.tagName+"元素");});

getButton方法

我们知道，只有在鼠标主按钮被单击（或键盘回车键被按下、触摸屏被单点击中）时才会触发click事件

但对于mousedown和mouseup事件来说，鼠标上的任意按钮都可以触发它

有时，我们可能需要知道用户按下了哪个鼠标按钮

DOM的event.button属性可以做到这一点，这个属性可能有3个值

0表示主鼠标按钮（通常是左键）、1表示鼠标滚轮按钮、2表示鼠标右键

虽然IE的event对象也提供了button属性

但遗憾的是，IE的button属性与DOM的button属性有很大差异

而且不被其它浏览器支持，实用性很低，在此不予赘述

getButton方法的作用是，让所有浏览器的event.button表现与DOM相同

在添加了EventUtil后，可以像下面示例“重点语句”一样使用getButton方法而无需考虑IE中的差异

var div=document.getElementById("myDiv");EventUtil.addHandler(div,"mousedown",function(event){ //监控按下div的是哪个按钮   event=EventUtil.getEvent(event);   alert(EventUtil.getButton(event));  //重点语句，弹出框显示按下哪个鼠标键的代号（0、1或2）});//同理，若事件是mouseup，则botton值表示释放的是哪个按钮

getWheelDelta方法

有时，为了让页面达到某些特殊效果，我们需要监视用户的鼠标滚轮操作

这一次，“与众不同”的是Firefox，而不是旧版本的IE

所有浏览器（包括IE6，除了Firefox）均支持鼠标滚轮事件mousewheel

而Firefox却是通过DOMMouseScroll事件实现类似功能

事件名的差异无法通过EventUtil改变

但关键是，这个事件表示鼠标滚轮滚动方向的方法，Firefox与其它浏览器也有差异

差异的本身已不是重点，重点是EventUtil的getWheelDelta方法可以很好的解决它们的差异

在添加了EventUtil后，可以像下面示例“重点语句”一样使用getWheelDelta方法而无需考虑FIrefox中的差异

function handleMouseWheel(event){   event=EventUtil.getEvent(event);   var delta=EventUtil.getWheelDelta(event);  //重点语句，delta是表示鼠标滚轮滚动方向的数值   alert(delta);}EventUtil.addHandler(document,"mousewheel",handleMouseWheel);      //非FirefoxEventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel);  //Firefox

多数情况下，我们只需关心如上例中通过getWheelDelta方法获得的delta数值的正负

当用户向前滚动鼠标滚轮时，delta的数值为正，反之为负

滚轮滚动越多，delta数值的绝对值越大，且均是120的倍数

getCharCode方法

在所有浏览器中，按下能够插入或删除的字符的按键都会触发keypress事件

但IE8-及Opera取得字符编码（ASCII码）的方式与其它浏览器是不同的

为了解决这一差异，在EventUtil中存在getCharCode方法

在添加了EventUtil后，可以像下面示例“重点语句”一样使用getCharCode方法来获取统一的字符编码

var textbox=document.getElementById("myText");EventUtil.addHandler(textbox,"keypress",function(event){   event=EventUtil.getEvent(event);   alert(EventUtil.getCharCode(event)); //重点语句，弹出窗口中显示按下按键代表字符的ASCII码});