《javascript高級程序設計》跨瀏覽器事件處理程序EventUtil.js個人注釋

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方法

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

在DOM0級事件處理程序（下文均簡稱“DOM0級”）中

每個元素（包括windows和document）都有自己的事件處理程序屬性（通常全部小寫）

如常見的onload、onclick等

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

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

在DOM2級事件處理程序（下文均簡稱“DOM2級”）中

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

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

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

DOM2級通常如下指定事件處理程序

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

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

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

它接受兩個參數：事件處理程序名稱與事件處理程序函數

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

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

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

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

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

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

就像這樣，使用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對象支持許多方法，下表列出了一些常用的方法以供參考

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

currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素
preventDefault( )	Function	只讀	取消事件的默認行為
stopPropagation( )	Function	只讀	取消事件的進一步捕獲或冒泡
target	Element	只讀	事件的實際（真正）目標
type	String	只讀	被觸發的事件的類型

在兼容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的瀏覽器中不同，如下表

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

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

正是因為這些差異的存在，使得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);

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

至于event對象的屬性/方法差異，下文還會介紹其它方法進行處理

?

target對象與getTarget方法

在上一部分（“event對象與getEvent方法”）的介紹中，通過表格你可能已經發現

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

在IE中，獲取事件目標對象的方法為event.srcElement

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

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

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

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

preventDefault方法

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

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

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

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

故在EventUtil中，存在一個preventDefault方法，用于統一上述差異

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

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

?

stopPropagation方法

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

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

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

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

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

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

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

1 var link=document.getElementById("myLink"); 2 var handler=function(event){ 3 event=EventUtil.getEvent(event); 4 EventUtil.stopPropagation(event); //重點語句 5 }; 6 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方法

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); //重點語句 6 alert("鼠標離開了"+target.tagName+"元素而進入了"+relatedTarget.tagName+"元素"); 7 });

?

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中的差異

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

?

getWheelDelta方法

有時，為了讓頁面達到某些特殊效果，我們需要監視用戶的鼠標滾輪操作

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

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

而Firefox卻是通過DOMMouseScroll事件實現類似功能

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

但關鍵是，這個事件表示鼠標滾輪滾動方向的方法，Firefox與其它瀏覽器也有差異

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

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

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

多數情況下，我們只需關心如上例中通過getWheelDelta方法獲得的delta數值的正負

當用戶向前滾動鼠標滾輪時，delta的數值為正，反之為負

滾輪滾動越多，delta數值的絕對值越大，且均是120的倍數

?

getCharCode方法

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

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

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

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

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

?

轉載于:https://www.cnblogs.com/dragonir/p/7805818.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。