快捷導(dǎo)航

DOM 中的事件處理介紹

更新時間：2012年01月18日 01:31:49 作者：

根據(jù) W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的節(jié)點（Node）實現(xiàn)

該接口提供了 'addEventListener' 和 'removeEventListener' 方法，用來綁定或解綁一個 EventListeners 接口到一個 EventTarget。

DOM 2 Events 中定義了 Event 接口，用來提供事件的上下文信息，它提供了若干標(biāo)準(zhǔn)屬性和方法。實現(xiàn) Event 接口的對象一般作為第一個參數(shù)傳入事件處理函數(shù)，以用來提供當(dāng)前事件相關(guān)的一些信息。

事件注冊
根據(jù) DOM 2 Events 中描述，節(jié)點使用 'addEventListener' 和 'removeEventListener' 方法綁定和解綁事件監(jiān)聽器，但 IE6 IE7 IE8 不支持這兩個方法，而使用 'attachEvent' 和 'detachEvent' 方法作為替代方案，Opera 兩類方法都支持。Chrome Safari Firefox 只支持標(biāo)準(zhǔn)方法。

為了解決瀏覽器兼容問題，可以自定義函數(shù)來解決。例如：

復(fù)制代碼代碼如下:

 
var EventUtil = { 
addHandler: function (element, type, handler) { 
if (element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else if (element.attachEvent) { 
element.attachEvent("on" + type, handler); 
} else { 
element["on" + type] = handler; 
} 
}, 
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; 
} 
} 
}; 

關(guān)于 'addEventListener' 和 'attachEvent' 有幾點需要注意：

IE 不支持在捕獲階段觸發(fā)事件監(jiān)聽器，'attachEvent' 方法沒有提供參數(shù)說明是否響應(yīng)在捕獲階段觸發(fā)的事件；
'addEventListener' 和 'attachEvent' 都可以注冊多個事件監(jiān)聽器；
在 Firefox Chrome Safari Opera 中給同一事件注冊同一個事件監(jiān)聽器多次，重復(fù)注冊的會被丟棄；而在 IE 中重復(fù)注冊的事件監(jiān)聽器會被重復(fù)執(zhí)行多次；
當(dāng)給同一元素注冊了多個事件監(jiān)聽器的時候，IE6 IE7 的事件監(jiān)聽器執(zhí)行順序是隨機的，IE8 是倒序的，F(xiàn)irefox Chrome Safari Opera 是順序的；
當(dāng)元素注冊的事件監(jiān)聽器中有非法的事件監(jiān)聽器時（非函數(shù)），在 IE Firefox 中會拋出異常，而在 Chrome Safari Opera 中則會忽略非法的事件監(jiān)聽器，繼續(xù)執(zhí)行其他的事件監(jiān)聽器。
事件對象
在ie中，事件對象是作為一個全局變量來保存和維護的。所有的瀏覽器事件,不管是用戶觸發(fā)的，還是其他事件，都會更新window.event 對象。所以在代碼中，只要輕松調(diào)用 window.event 就可以輕松獲取事件對象，再 event.srcElement 就可以取得觸發(fā)事件的元素進行進一步處理。

對于標(biāo)準(zhǔn)的 DOM 處理來說，事件對象卻不是全局對象，一般情況下，是現(xiàn)場發(fā)生，現(xiàn)場使用，把事件對象自動傳遞給對應(yīng)的事件處理函數(shù)。在代碼中，函數(shù)的第一個參數(shù)就是事件對象了。

為了解決兼容性問題，通常在代碼中如下處理：

復(fù)制代碼代碼如下:

 
function handler(e){ 
e = e || window.event; 
} 

需要注意的是，使用 <button id="btn" onclick="foo()">按鈕1</button> 進行事件注冊，標(biāo)準(zhǔn)方式下卻不能在事件處理方法中取得事件對象。

原因是　onclick="foo()" 就是直接執(zhí)行了， foo() 函數(shù),沒有任何參數(shù)傳遞給 foo 函數(shù)。

有兩個辦法解決這個問題。

第一，將注冊的方法修改為 <button id="btn" onclick="foo(event)">按鈕</button>，注意，這里的 event 不是形參，而是實參，必須名為 event。這樣 foo 函數(shù)就可以得到事件參數(shù)了。

第二，不修改注冊的代碼，在事件處理方法上進行處理。關(guān)鍵在于此時實際上存在事件對象，只不過沒有傳遞給 foo 函數(shù)罷了，我們可以找到調(diào)用 foo 函數(shù)的那個函數(shù)，當(dāng)然這是一個系統(tǒng)函數(shù)，沒有關(guān)系，通過 foo.caller 可以取得當(dāng)前調(diào)用 foo 函數(shù)的函數(shù)，這個函數(shù)的第一個參數(shù)就是事件對象，所以，我們可以這樣取得這個事件對象了。foo.caller.arguments[0]。

注意：

只有在使用 attachEvent 方法注冊事件監(jiān)聽器的時候，IE 才支持使用事件監(jiān)聽器傳入的第一個參數(shù)作為事件對象的方式；
Chrome Safari Opera 兩種獲取事件對象的方式都支持；
Firefox 只支持獲取事件對象的標(biāo)準(zhǔn)方式。
事件對象的屬性
IE 對事件對象的標(biāo)準(zhǔn)屬性和方法支持有限，針對大部分屬性和方法，IE 都提供了一套替代非標(biāo)準(zhǔn)的替代方案；而 Firefox Chrome Safari Opera 除了全面支持事件對象的標(biāo)準(zhǔn)屬性和方法外，還在不同程度上支持了 IE 提供的非標(biāo)準(zhǔn)替代方案。

使用特性判斷使用與標(biāo)準(zhǔn)對應(yīng)的非標(biāo)準(zhǔn)方法及屬性

　　target　　　　　　　　　　srcElement

　　preventDefault()　　　　　returnValue

　　stopPropagation()　　　　cancelBubble

　　relatedTarget　　　　　　fromElement toElement

例如：

復(fù)制代碼代碼如下:

 
getEvent: function (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) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
} 