DOM 中的事件處理介紹
2024-05-06 14:22:36
供稿：網(wǎng)友
該接口提供了 '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ù)來解決。例如：
代碼如下:
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)場(chǎng)發(fā)生，現(xiàn)場(chǎng)使用，把事件對(duì)象自動(dòng)傳遞給對(duì)應(yīng)的事件處理函數(shù)。 在代碼中，函數(shù)的第一個(gè)參數(shù)就是事件對(duì)象了。
為了解決兼容性問題，通常在代碼中如下處理：
