《javascript高级程序设计》跨浏览器事件处理程序EventUtil.js个人注释

// 跨浏览器事件处理程序封装
var EventUtil = {// 添加事件句柄addHandler: function(element, type, handler){// DOM 2 级事件处理程序if (element.addEventListener){element.addEventListener(type, handler, false);}// IE事件处理程序else if (element.attachEvent){element.attachEvent("on" + type, handler);} // DOM 0 级事件处理程序else{element["on" + type] = handler;}},// 获取鼠标事件button属性 ，// 0：主鼠标按钮    // 1：中间按钮        // 2：次鼠标按钮getButton: function(event){// DOM Button属性if(document.implementation.hasFeature("MouseEvents", "2.0")){return event.button;}// IE 模式下的button属性else{switch(event.button){case 0:case 1:case 3:case 5:case 7:return 0;case 2:case 6:return 2;case 4: return 1;}}},// 获取键盘事件keypress事件的charCode属性// 该值表示按下的键所代表的ASCII码getCharCode: function(event){// IE9 FireFox Chrome Safariif(typeof event.getCharCode == "number"){return event.charCode;}// IE8 Operaelse{return event.keyCode;}},// 获取剪切板内容getClipboardText: function(event){var clipboardData =  (event.clipboardData || window.clipboardData);return clipboardData.getData("text");},// 获取事件对象getEvent: function(event){return event ? event : window.event;},// 获取relatedTarget属性// 在mouseover事件触发时，IE的fromElement属性中保存了相关元素；// 在mouseout事件触发时，IE的toElement属性中保存了相关元素getRelatedTarget: function(event){// DOM属性，IE8不支持if (event.relatedTarget){return event.relatedTarget;} // IE mouseoutelse if (event.toElement){return event.toElement;} // IE mouseoverelse if (event.fromElement){return event.fromElement;} else {return null;}},// 获取target事件对象getTarget: function(event){// DOM || IEreturn event.target || event.srcElement;},// 获取鼠标滚轮滚动时的属性值getWheelDelta: function(event){// IE6.0 Chrome  Opera  Safari wheelData属性值// 向前滚动是120的倍数// 向后滚动是-120的倍数if (event.wheelDelta){return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);} // Firefox detail属性值// 向前滚动是-3的倍数// 向后滚动是3的倍数else {return -event.detail * 40;}},// 取消事件的默认行为preventDefault: function(event){// DOMif (event.preventDefault){event.preventDefault();} // IEelse {event.returnValue = false;}},// 移除事件句柄removeHandler: function(element, type, handler){// DOM 2if (element.removeEventListener){element.removeEventListener(type, handler, false);} // IEelse if (element.detachEvent){element.detachEvent("on" + type, handler);} // DOM 0else {element["on" + type] = null;}},// 设置剪切板内容setClipboardText: function(event, value){// Chromeif (event.clipboardData){event.clipboardData.setData("text/plain", value);} // IEelse if (window.clipboardData){window.clipboardData.setData("text", value);}},// 取消事件冒泡stopPropagation: function(event){// DOMif (event.stopPropagation){event.stopPropagation();}// IEelse {event.cancelBubble = true;}}};

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

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

removeHandler方法

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

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

btn.οnclick=null;

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

1 //这里的handler应与使用addEventListener指定事件处理函数时所用的外部函数相同

2 btn.removeEventListener("click",handler,fals

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

btn.detachEvent("onclick",handler); 

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

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

1 //同样的，这里的handler应与使用addHandler指定事件处理函数时所用的外部函数相同

2 EventUtil.removeHandler(btn,"click",hanlder);

event对象与getEvent方法

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

这个event其实是事件对象

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

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

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

 1 var btn=document.getElementById("myBtn");2 var handler=function(event){3    switch(event.type){      //使用event.type检测事件类型4       case "click":         //若是Click事件5          alert("Clicked");6          break;7       case: "mouseover":    //若是Mouseover事件8          //使用event.target获取事件目标，并更改目标样式背景颜色9          event.target.style.backgroundColor="red";
10          break;
11       case: "mouseout":     //若是Mouseout事件
12          event.target.style.backgroundColor="";
13          break;
14    }
15 };
16 btn.οnclick=handler;  //使用DOM0级为对象添加事件处理函数
17 btn.οnmοuseοver=handler;
18 btn.οnmοuseοut=handler;

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

在IE中则有所不同

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

1 btn.οnclick=function(){
2    var event=window.event;
3    alert(event.type);  //"click"
4 };

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

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

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

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

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

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

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