Event Handler 事件處理程序 1 ---《高程3》

WalkerXu 發(fā)布于2019-08-20 11:31 / 1112人閱讀

摘要：為屬性賦值匿名函數(shù)事件作用域使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。最后這個(gè)布爾值參數(shù)如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。

事件捕獲和事件冒泡

“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲、處于目標(biāo)階段和事件冒泡。首先發(fā)生的是事件捕獲，從外部節(jié)點(diǎn)到內(nèi)部節(jié)點(diǎn)依次遍歷，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡階段，從目標(biāo)元素逐層冒泡到外部元素，可以在這個(gè)階段對(duì)事件做出響應(yīng)。IE9、 Opera、 Firefox、 Chrome 和 Safari 都支持 DOM 事件流； IE8 及更早版本不支持 DOM 事件流。

Event Handler 的常見(jiàn)用法

事件處理程序名稱(chēng)是事件名稱(chēng)前加on，如onclick、onload. 為事件指定事件處理程序的方法包括：

1）HTML事件處理程序：

通過(guò)HTML元素的特性指定：

最大缺點(diǎn)：HTML和JavaScript緊密耦合，不建議采用。

2）DOM0級(jí)事件處理程序：

通過(guò) JavaScript 指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴Ｊ紫缺仨毴〉靡粋€(gè)要操作的對(duì)象的引用。每個(gè)元素（包括 window 和 document）都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫(xiě)，例如 onclick。將這種屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序。

var btn = document.getElementById("myBtn");
//為屬性賦值匿名函數(shù)
btn.onclick = function(){
alert("Clicked");
};

事件作用域：使用 DOM0 級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。因此，這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行；換句話(huà)說(shuō)，程序中的 this 引用當(dāng)前元素。
移除方式：刪除通過(guò) DOM0 級(jí)方法指定的事件處理程序，只要像下面這樣將事件處理程序?qū)傩缘闹翟O(shè)置為 null 即可：

   btn.onclick = null; //刪除事件處理程序

還記得怎么刪除對(duì)象實(shí)例屬性嗎？使用delete算符，刪除后實(shí)例屬性就沒(méi)了，但是原型屬性還在。
缺點(diǎn)：同一個(gè)事件添加兩個(gè)事件處理程序會(huì)導(dǎo)致后一個(gè)覆蓋前一個(gè)。原因在于一個(gè)事件處理程序就是一個(gè)屬性，為一個(gè)屬性賦兩個(gè)值，后一個(gè)會(huì)覆蓋前一個(gè)。

3）DOM2 級(jí)事件處理程序

“ DOM2 級(jí)事件” 定義了兩個(gè)方法，用于處理綁定和刪除事件處理程序的操作：
addEventListener()和 removeEventListener()。
所有 DOM 節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受 3 個(gè)參數(shù)：要處理的事件名（不帶on）、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是 true，表示在捕獲階段調(diào)用事件處理程序；如果是 false，表示在冒泡階段調(diào)用事件處理程序。

/*為一個(gè)按鈕添加了 onclick 事件處理程序，而且該事件會(huì)在冒泡階段被觸發(fā)*/
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);

事件作用域：與 DOM0 級(jí)方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運(yùn)行。使用 DOM2 級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序，多事件處理程序會(huì)按照添加它們的順序觸發(fā)。IE9、 Firefox、 Safari、 Chrome 和 Opera 支持 DOM2 級(jí)事件處理程序，對(duì)IE8及以下版本有專(zhuān)用事件處理程序。
移除方式：通過(guò) addEventListener()添加的事件處理程序只能使用 removeEventListener()來(lái)移除；移除時(shí)傳入的參數(shù)與添加處理程序時(shí)使用的參數(shù)相同。這也意味著通過(guò) addEventListener()添加的匿名函數(shù)將無(wú)法通過(guò)removeEventListener()移除，這是因?yàn)槟涿瘮?shù)每次出現(xiàn)都是一次調(diào)用，命名函數(shù)每次出現(xiàn)是一次引用。因此建議使用命名函數(shù)作為eventhandler的函數(shù)參數(shù)。
大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段（最后一個(gè)參數(shù)是false），這樣可以最大限度地兼容各種瀏覽器，jQuery和React使用冒泡機(jī)制，解決了兼容性問(wèn)題。

4）IE事件處理程序（非標(biāo)準(zhǔn)方法）

IE 實(shí)現(xiàn)了與 DOM 中類(lèi)似的兩個(gè)方法： attachEvent()和 detachEvent()。這兩個(gè)方法接受相同的兩個(gè)參數(shù)：事件處理程序名稱(chēng)與事件處理程序函數(shù)。由于 IE8 及更早版本只支持事件冒泡，所以通過(guò)attachEvent()添加的事件處理程序都會(huì)被添加到冒泡階段（DOM2標(biāo)準(zhǔn)建議采用冒泡階段，但是也可以采用捕獲階段）。

var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){   //注意使用了帶on的事件名和匿名函數(shù)
alert("Clicked");
});

注意：(a) attachEvent()的第一個(gè)參數(shù)是"onclick"，而非 DOM 的 addEventListener()方法中的"click"。(b) 在使用 attachEvent()方法的情況下，事件處理程序會(huì)在全局作用域中運(yùn)行，因此 this 等于 window。在使用 DOM0 和DOM2標(biāo)準(zhǔn)方法的情況下，事件處理程序會(huì)在其所屬元素的作用域內(nèi)運(yùn)行。（c）默認(rèn)添加在在冒泡階段。(d)可以添加多個(gè)事件處理程序，多個(gè)事件處理程序的執(zhí)行順序和DOM2 相反，也就是和添加順序相反。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});

移除：使用 attachEvent()添加的事件可以通過(guò) detachEvent()來(lái)移除，條件是必須提供相同的參數(shù)。與 DOM 方法一樣，這也意味著添加的匿名函數(shù)將不能被移除。不過(guò)，只要能夠?qū)?duì)相同命名函數(shù)的引用傳給 detachEvent()，就可以移除相應(yīng)的事件處理程序。

5) 跨瀏覽器的事件處理程序

可以通過(guò)能夠隔離瀏覽器差異的JavaScript庫(kù)或者創(chuàng)建兼容各大瀏覽器差異的事件處理方法，庫(kù)使用可以參照jQuery，這里不介紹。兼容各大瀏覽器差異的事件處理方法包括addHandler()和removeHandler()，都屬于EvenUtil對(duì)象，接收相同的參數(shù)：要操作的元素、事件名稱(chēng)、事件處理程序函數(shù)。

這兩個(gè)方法首先都會(huì)檢測(cè)傳入的元素中是否存在 DOM2 級(jí)方法。如果存在 DOM2 級(jí)方法，則使用該方法：傳入事件類(lèi)型、事件處理程序函數(shù)和第三個(gè)參數(shù) false（表示冒泡階段）。如果存在的是 IE 的方法，則采取第二種方案。注意，為了在 IE8 及更早版本中運(yùn)行，此時(shí)的事件類(lèi)型必須加上"on"前綴。最后一種可能就是使用 DOM0 級(jí)方法（在現(xiàn)代瀏覽器中，應(yīng)該不會(huì)執(zhí)行這里的代碼）。此時(shí)，我們使用的是方括號(hào)語(yǔ)法來(lái)將屬性名指定為事件處理程序（add），或者將屬性設(shè)置為 null(remove)。
使用方法如下：