快捷導(dǎo)航

DOM 中的事件處理介紹

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

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

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

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

事件注冊(cè)
根據(jù) DOM 2 Events 中描述，節(jié)點(diǎn)使用 'addEventListener' 和 'removeEventListener' 方法綁定和解綁事件監(jiān)聽器，但 IE6 IE7 IE8 不支持這兩個(gè)方法，而使用 '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' 有幾點(diǎn)需要注意：

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

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

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

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

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

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

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

有兩個(gè)辦法解決這個(gè)問題。

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

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

注意：

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

使用特性判斷使用與標(biāo)準(zhǔn)對(duì)應(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; 
} 
} 