《javascript高級(jí)程序設(shè)計(jì)》跨瀏覽器事件處理程序EventUtil.js個(gè)人注釋

EventUtil.js

// 跨瀏覽器事件處理程序封裝 var EventUtil = {// 添加事件句柄addHandler: function(element, type, handler){// DOM 2 級(jí)事件處理程序if (element.addEventListener){element.addEventListener(type, handler, false);}// IE事件處理程序else if (element.attachEvent){element.attachEvent("on" + type, handler);} // DOM 0 級(jí)事件處理程序else{element["on" + type] = handler;}},// 獲取鼠標(biāo)事件button屬性 ，// 0：主鼠標(biāo)按鈕 // 1：中間按鈕 // 2：次鼠標(biāo)按鈕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;}},// 獲取剪切板內(nèi)容getClipboardText: function(event){var clipboardData = (event.clipboardData || window.clipboardData);return clipboardData.getData("text");},// 獲取事件對(duì)象getEvent: function(event){return event ? event : window.event;},// 獲取relatedTarget屬性// 在mouseover事件觸發(fā)時(shí)，IE的fromElement屬性中保存了相關(guān)元素；// 在mouseout事件觸發(fā)時(shí)，IE的toElement屬性中保存了相關(guān)元素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事件對(duì)象getTarget: function(event){// DOM || IEreturn event.target || event.srcElement;},// 獲取鼠標(biāo)滾輪滾動(dòng)時(shí)的屬性值getWheelDelta: function(event){// IE6.0 Chrome Opera Safari wheelData屬性值// 向前滾動(dòng)是120的倍數(shù)// 向后滾動(dòng)是-120的倍數(shù)if (event.wheelDelta){return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);} // Firefox detail屬性值// 向前滾動(dòng)是-3的倍數(shù)// 向后滾動(dòng)是3的倍數(shù)else {return -event.detail * 40;}},// 取消事件的默認(rèn)行為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;}},// 設(shè)置剪切板內(nèi)容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;}}};

　　

詳細(xì)說明：

?

addHandler方法

這是EventUtil中最常用的方法，它的作用是為對(duì)象添加事件并保證兼容性

在DOM0級(jí)事件處理程序（下文均簡(jiǎn)稱“DOM0級(jí)”）中

每個(gè)元素（包括windows和document）都有自己的事件處理程序?qū)傩?#xff08;通常全部小寫）

如常見的onload、onclick等

以Click事件為例（下同），DOM0級(jí)通常如下指定事件處理程序

1 var btn=document.getElementById("myBtn"); 2 btn.οnclick=function(){ //指定事件處理程序 3 alert(this.id); //"myBtn" 4 };

在DOM2級(jí)事件處理程序（下文均簡(jiǎn)稱“DOM2級(jí)”）中

指定事件處理程序的方法為addEventListener( )

它接受3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值（大多數(shù)情況下是false）

（布爾值表示是在捕獲階段(true)還是冒泡階段(false)調(diào)用事件處理程序）

DOM2級(jí)通常如下指定事件處理程序

1 var btn=document.getElementById("myBtn"); 2 //在外部定義好函數(shù)再傳給addEventListener()，這樣才可以通過removeEventListener()移除 3 var handler=function(){ 4 alert(this.id); 5 }; 6 btn.addEventListener("click",handler,false);

在舊版本IE（代表IE8-，下文均簡(jiǎn)稱“IE”）中

指定事件處理程序的方法為attachEvent( )

它接受兩個(gè)參數(shù)：事件處理程序名稱與事件處理程序函數(shù)

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

1 var btn=document.getElementById("myBtn"); 2 var handler=function(){ 3 alert("Clicked"); 4 }; 5 //注意：第一個(gè)參數(shù)是"onclick"，而非DOM0的addEventListener()方法中的"click" 6 btn.attachEvent("onclick",handler);

由上可見，DOM0級(jí)、DOM2級(jí)和IE中指定事件方法有很大不同

EventUtil對(duì)象中的addHandler方法正是為了處理這些差異而存在

在添加了EventUtil（指上文“EventUtil對(duì)象全見”中的代碼，下同）后，可以如下所示為對(duì)象指定事件處理程序

1 var btn=document.getElementById("myBtn"); 2 var handler=function(){ 3 alert("Clicked!"); 4 }; 5 EventUtil.addHandler(btn,"click",handler); //調(diào)用已定義的EventUtil對(duì)象

就像這樣，使用addHandler方法指定事件處理程序

即可兼容支持DOM0級(jí)、DOM2級(jí)的瀏覽器或IE瀏覽器

?

removeHandler方法

同樣的，在DOM0級(jí)、DOM2級(jí)與IE中，移除事件的方法是不同的

在DOM0級(jí)中，在不再需要某對(duì)象的事件處理程序時(shí)（如頁面銷毀前），可以像下面這樣簡(jiǎn)單的移除事件處理程序

btn.οnclick=null;

在DOM2級(jí)中，刪除事件處理程序需要使用removeEventListener( )方法，如下所示

?1 //這里的handler應(yīng)與使用addEventListener指定事件處理函數(shù)時(shí)所用的外部函數(shù)相同?

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

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

btn.detachEvent("onclick",handler);

因?yàn)檫@些差異的存在，才令EventUtil中有了removeHandler方法

在添加了EventUtil后，可以如下所示使用removeHandler方法方便地刪除對(duì)象事件處理程序

1 //同樣的，這里的handler應(yīng)與使用addHandler指定事件處理函數(shù)時(shí)所用的外部函數(shù)相同?

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

event對(duì)象與getEvent方法

你可能已經(jīng)發(fā)現(xiàn)了，在EventUtil中，很多方法的參數(shù)都是event

這個(gè)event其實(shí)是事件對(duì)象

兼容DOM（無論是DOM0級(jí)還是DOM2級(jí)）的瀏覽器會(huì)將一個(gè)event對(duì)象傳入到事件處理程序中

這個(gè)event對(duì)象支持許多方法，下表列出了一些常用的方法以供參考

屬性/方法類型讀/寫說明

currentTarget	Element	只讀	其事件處理程序當(dāng)前正在處理事件的那個(gè)元素
preventDefault( )	Function	只讀	取消事件的默認(rèn)行為
stopPropagation( )	Function	只讀	取消事件的進(jìn)一步捕獲或冒泡
target	Element	只讀	事件的實(shí)際（真正）目標(biāo)
type	String	只讀	被觸發(fā)的事件的類型

在兼容DOM的瀏覽器中，event對(duì)象可以如下面這個(gè)例子這樣使用

1 var btn=document.getElementById("myBtn");2 var handler=function(event){3 switch(event.type){ //使用event.type檢測(cè)事件類型4 case "click": //若是Click事件5 alert("Clicked");6 break;7 case: "mouseover": //若是Mouseover事件8 //使用event.target獲取事件目標(biāo)，并更改目標(biāo)樣式背景顏色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級(jí)為對(duì)象添加事件處理函數(shù) 17 btn.οnmοuseοver=handler; 18 btn.οnmοuseοut=handler;

需要強(qiáng)調(diào)的是，以上使用event事件的方法僅適用于兼容DOM的瀏覽器

在IE中則有所不同

在IE中，使用DOM0級(jí)添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在，如下例子所示

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

神奇的是，如果事件處理程序是使用attachEvent( )添加的，則又可以像在支持DOM的瀏覽器中一樣

event對(duì)象又可作為參數(shù)傳入事件處理程序函數(shù)中，如下例子所示

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

而且，更神奇的是，在IE中，event對(duì)象的一些屬性/方法還跟其它支持DOM的瀏覽器中不同，如下表

屬性/方法類型讀/寫說明

cancelBubble	Boolean	讀/寫	默認(rèn)值為false，將其設(shè)置為true就可以取消事件冒泡 （與DOM中的stopPropagation( )方法的作用相同）
returnValue	Boolean	讀/寫	默認(rèn)值為true，將其設(shè)置為false就可以取消事件的默認(rèn)行為 （與DOM中的preventDefault( )方法的作用相同）
srcElement	Element	只讀	事件的目標(biāo)（與DOM中的target屬性相同）
type	String	只讀	被觸發(fā)的事件類型

正是因?yàn)檫@些差異的存在，使得EventUtil中的getEvent方法應(yīng)運(yùn)而生

在添加了EventUtil后，可以如下“重點(diǎn)語句”所示獲取event對(duì)象而無需擔(dān)心上述差異導(dǎo)致的兼容問題

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

這樣，就解決了event對(duì)象獲取方式不同的問題

至于event對(duì)象的屬性/方法差異，下文還會(huì)介紹其它方法進(jìn)行處理

?

target對(duì)象與getTarget方法

在上一部分（“event對(duì)象與getEvent方法”）的介紹中，通過表格你可能已經(jīng)發(fā)現(xiàn)

在IE中和其它兼容DOM的瀏覽器中，獲取事件目標(biāo)（target）的方法不同

在IE中，獲取事件目標(biāo)對(duì)象的方法為event.srcElement

而在其它兼容DOM的瀏覽器中，獲取事件目標(biāo)對(duì)象的方法卻為event.target

getTarget方法正是為了處理這個(gè)差異而存在

在添加了EventUtil后，可以如下“重點(diǎn)語句”所示獲取事件的目標(biāo)（target）對(duì)象而無需擔(dān)心上述差異導(dǎo)致的兼容問題

1 var btn=document.getElementById("myBtn"); 2 var handler=function(event){ 3 event=EventUtil.getEvent(event); 4 var target=EventUtil.getTarget(event); //重點(diǎn)語句 5 }; 6 EventUtil.addHandler(btn,"click",handler);

preventDefault方法

在其它兼容DOM的瀏覽器中，阻止特定事件的默認(rèn)行為只需使用event對(duì)象自帶的preventDefault( )方法，如下所示

1 var link=document.getElementById("myLink"); 2 link.οnclick=function(event){ 3 event.preventDefault(); //DOM0級(jí)或DOM2級(jí)阻止事件默認(rèn)行為的方法 4 }

而在IE中，則需賦予event.returnValue的值為false才能阻止特定事件的默認(rèn)行為

?1?link.attachEvent("onclick",function(event){?2?event.returnValue=false;?//IE中阻止事件默認(rèn)行為的方法?3?});?

故在EventUtil中，存在一個(gè)preventDefault方法，用于統(tǒng)一上述差異

在添加了EventUtil后，可以如下“重點(diǎn)語句”所示阻止特定事件的默認(rèn)行為而無需擔(dān)心上述差異導(dǎo)致的兼容問題

1 var link=document.getElementById("myLink"); 2 var handler=function(event){ 3 event=EventUtil.getEvent(event); 4 EventUtil.preventDefault(event); //重點(diǎn)語句 5 }; 6 EventUtil.addHandler(link,"click",handler);

?

stopPropagation方法

有時(shí)候，我們需要取消事件的進(jìn)一步捕獲或冒泡，即停止事件在DOM層次中傳播

兼容DOM的瀏覽器可以通過使用event對(duì)象自帶的stopPropagation( )方法做到這一點(diǎn)

1 var link=document.getElementById("myLink"); 2 link.οnclick=function(event){ 3 event.stopPropagation(); //DOM0級(jí)或DOM2級(jí)取消事件的進(jìn)一步捕獲或冒泡的方法 4 };

而在IE中，則需賦予event.cancelBubble的值為true

?1?link.attachEvent("onclick",function(event){?2?event.cancelBubble=true;?//IE中取消事件的進(jìn)一步冒泡的方法?3?});?

EventUtil中的stopPropagation( )方法可以統(tǒng)一上述差異

在添加了EventUtil后，可以如下“重點(diǎn)語句”所示取消事件的進(jìn)一步捕獲或冒泡而無需擔(dān)心差異導(dǎo)致的兼容問題

1 var link=document.getElementById("myLink"); 2 var handler=function(event){ 3 event=EventUtil.getEvent(event); 4 EventUtil.stopPropagation(event); //重點(diǎn)語句 5 }; 6 EventUtil.addHandler(link,"click",handler);

?

相關(guān)元素與getRelatedTarget方法

mouseover與mouseout有“主目標(biāo)（主元素）”與“相關(guān)元素”的概念

因?yàn)樵诎l(fā)生mouseover或mouseout事件時(shí)，還會(huì)涉及到其它元素

這兩個(gè)事件都會(huì)涉及把鼠指針從一個(gè)元素（相關(guān)元素）移到另一個(gè)元素（主目標(biāo)）內(nèi)

具體點(diǎn)說

對(duì)mouseover事件而言，事件的主目標(biāo)是獲得光標(biāo)的元素，而相關(guān)元素是那個(gè)失去光標(biāo)的元素

對(duì)mouseout事件而言，事件的主目標(biāo)是失去光標(biāo)的元素，而相關(guān)元素是那個(gè)獲得光標(biāo)的元素

DOM通過event對(duì)象的relatedTarget屬性提供了相關(guān)元素的信息

但IE8及之前的版本不支持relatedTarget屬性，不過提供了其它類似屬性支持

在mouseover事件觸發(fā)時(shí)，IE的formElement屬性中保存了相關(guān)元素

在mouseout事件觸發(fā)時(shí)，IE的toElement屬性中保存了相關(guān)元素

EventUtil中的getRelatedTarget方法正是為了平衡這些差異而存在

在添加了EventUtil后，可以像下面示例“重點(diǎn)語句”一樣使用getRelatedTarget方法

1 var div=document.getElementById("myDiv"); 2 EventUtil.addHandler(div,"mouseout",function(event){ 3 event=EventUtil.getEvent(event); 4 var target=EventUtil.getTarget(event); 5 var relatedTarget=EventUtil.getRelatedTarget(event); //重點(diǎn)語句 6 alert("鼠標(biāo)離開了"+target.tagName+"元素而進(jìn)入了"+relatedTarget.tagName+"元素"); 7 });

?

getButton方法

我們知道，只有在鼠標(biāo)主按鈕被單擊（或鍵盤回車鍵被按下、觸摸屏被單點(diǎn)擊中）時(shí)才會(huì)觸發(fā)click事件

但對(duì)于mousedown和mouseup事件來說，鼠標(biāo)上的任意按鈕都可以觸發(fā)它

有時(shí)，我們可能需要知道用戶按下了哪個(gè)鼠標(biāo)按鈕

DOM的event.button屬性可以做到這一點(diǎn)，這個(gè)屬性可能有3個(gè)值

0表示主鼠標(biāo)按鈕（通常是左鍵）、1表示鼠標(biāo)滾輪按鈕、2表示鼠標(biāo)右鍵

雖然IE的event對(duì)象也提供了button屬性

但遺憾的是，IE的button屬性與DOM的button屬性有很大差異

而且不被其它瀏覽器支持，實(shí)用性很低，在此不予贅述

getButton方法的作用是，讓所有瀏覽器的event.button表現(xiàn)與DOM相同

在添加了EventUtil后，可以像下面示例“重點(diǎn)語句”一樣使用getButton方法而無需考慮IE中的差異

1 var div=document.getElementById("myDiv"); 2 EventUtil.addHandler(div,"mousedown",function(event){ //監(jiān)控按下div的是哪個(gè)按鈕 3 event=EventUtil.getEvent(event); 4 alert(EventUtil.getButton(event)); //重點(diǎn)語句，彈出框顯示按下哪個(gè)鼠標(biāo)鍵的代號(hào)（0、1或2） 5 }); 6 //同理，若事件是mouseup，則botton值表示釋放的是哪個(gè)按鈕

?

getWheelDelta方法

有時(shí)，為了讓頁面達(dá)到某些特殊效果，我們需要監(jiān)視用戶的鼠標(biāo)滾輪操作

這一次，“與眾不同”的是Firefox，而不是舊版本的IE

所有瀏覽器（包括IE6，除了Firefox）均支持鼠標(biāo)滾輪事件mousewheel

而Firefox卻是通過DOMMouseScroll事件實(shí)現(xiàn)類似功能

事件名的差異無法通過EventUtil改變

但關(guān)鍵是，這個(gè)事件表示鼠標(biāo)滾輪滾動(dòng)方向的方法，Firefox與其它瀏覽器也有差異

差異的本身已不是重點(diǎn)，重點(diǎn)是EventUtil的getWheelDelta方法可以很好的解決它們的差異

在添加了EventUtil后，可以像下面示例“重點(diǎn)語句”一樣使用getWheelDelta方法而無需考慮FIrefox中的差異

1 function handleMouseWheel(event){ 2 event=EventUtil.getEvent(event); 3 var delta=EventUtil.getWheelDelta(event); //重點(diǎn)語句，delta是表示鼠標(biāo)滾輪滾動(dòng)方向的數(shù)值 4 alert(delta); 5 } 6 EventUtil.addHandler(document,"mousewheel",handleMouseWheel); //非Firefox 7 EventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel); //Firefox

多數(shù)情況下，我們只需關(guān)心如上例中通過getWheelDelta方法獲得的delta數(shù)值的正負(fù)

當(dāng)用戶向前滾動(dòng)鼠標(biāo)滾輪時(shí)，delta的數(shù)值為正，反之為負(fù)

滾輪滾動(dòng)越多，delta數(shù)值的絕對(duì)值越大，且均是120的倍數(shù)

?

getCharCode方法

在所有瀏覽器中，按下能夠插入或刪除的字符的按鍵都會(huì)觸發(fā)keypress事件

但IE8-及Opera取得字符編碼（ASCII碼）的方式與其它瀏覽器是不同的

為了解決這一差異，在EventUtil中存在getCharCode方法

在添加了EventUtil后，可以像下面示例“重點(diǎn)語句”一樣使用getCharCode方法來獲取統(tǒng)一的字符編碼

1 var textbox=document.getElementById("myText"); 2 EventUtil.addHandler(textbox,"keypress",function(event){ 3 event=EventUtil.getEvent(event); 4 alert(EventUtil.getCharCode(event)); //重點(diǎn)語句，彈出窗口中顯示按下按鍵代表字符的ASCII碼 5 });

?

轉(zhuǎn)載于:https://www.cnblogs.com/dragonir/p/7805818.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。