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

wujl596 發布于2019-08-01 15:47 / 3391人閱讀

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

事件捕獲和事件冒泡

“DOM2級事件”規定的事件流包括三個階段：事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲，從外部節點到內部節點依次遍歷，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，從目標元素逐層冒泡到外部元素，可以在這個階段對事件做出響應。IE9、 Opera、 Firefox、 Chrome 和 Safari 都支持 DOM 事件流； IE8 及更早版本不支持 DOM 事件流。

Event Handler 的常見用法

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

1）HTML事件處理程序：

通過HTML元素的特性指定：

最大缺點：HTML和JavaScript緊密耦合，不建議采用。

2）DOM0級事件處理程序：

通過 JavaScript 指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。首先必須取得一個要操作的對象的引用。每個元素（包括 window 和 document）都有自己的事件處理程序屬性，這些屬性通常全部小寫，例如 onclick。將這種屬性的值設置為一個函數，就可以指定事件處理程序。

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

事件作用域：使用 DOM0 級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中的 this 引用當前元素。
移除方式：刪除通過 DOM0 級方法指定的事件處理程序，只要像下面這樣將事件處理程序屬性的值設置為 null 即可：

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

還記得怎么刪除對象實例屬性嗎？使用delete算符，刪除后實例屬性就沒了，但是原型屬性還在。
缺點：同一個事件添加兩個事件處理程序會導致后一個覆蓋前一個。原因在于一個事件處理程序就是一個屬性，為一個屬性賦兩個值，后一個會覆蓋前一個。

3）DOM2 級事件處理程序

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

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

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

4）IE事件處理程序（非標準方法）

IE 實現了與 DOM 中類似的兩個方法： attachEvent()和 detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數。由于 IE8 及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段（DOM2標準建議采用冒泡階段，但是也可以采用捕獲階段）。

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

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

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

移除：使用 attachEvent()添加的事件可以通過 detachEvent()來移除，條件是必須提供相同的參數。與 DOM 方法一樣，這也意味著添加的匿名函數將不能被移除。不過，只要能夠將對相同命名函數的引用傳給 detachEvent()，就可以移除相應的事件處理程序。

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

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

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

云服務器 GPU云服務器事件處理程序 js事件處理程序 event事件 js 待處理事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50115.html

Javascript之事件(一)

摘要：事件流事件流描述的是頁面接收事件的順序的事件流是冒泡流而的事件流是事件捕獲流事件冒泡是指事件開始時由最具體的元素，然后向上傳播到較為不具體的節點所有現代瀏覽器都支持事件冒泡則將事件一直冒泡到對象事件捕獲是不太具體的節點應該更早接收到事件而具事件流事件流描述的是頁面接收事件的順序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕獲流. 事件冒泡是指...

?xiaoxiao, 2019-08-22 10:58 評論0 收藏0
Javascript自定義事件

摘要：事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實現自定義事件實現自定義事件的原理是創建一個管理事件的對象如下代碼是事件的定義存儲事件處理程序由個鍵值對組成鍵表示事件名值是一個由事件處理程序組成的數組添加事件觸發事件將傳遞給事件定義事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實現自定義事件.實現自定義事件的原理是創建一個管理事件的對象.如下代碼...

Leck1e 2019-08-21 10:40 評論0 收藏0
jQuery源碼解析之jQuery.event.dispatch()

摘要：一起源方法最終是用綁定事件的而方法正是等于二作用觸發綁定的事件的處理程序源碼源碼行即原生觸發事件的處理程序修正對象獲取事件的處理程序集合，結構如下從數據緩存中獲取事件處理集合即目標元素委托目標這段代碼壓根不會執行，因為全局搜索沒找到結構 showImg(https://segmentfault.com/img/remote/1460000019464031); 一、起源jQuery.e...

GraphQuery 2019-08-23 18:05 評論0 收藏0
20170808 - 跨瀏覽器的事件兼容處理程序

摘要：第三個參數表示在冒泡階段調用事件處理程序，默認值為中的事件對象事件處理程序當前程序綁定的那個元素事件處理程序內部，的值始終等于的值事件發生的具體元素事件類型取消事件的默認行為取消事件的進一步捕獲或冒泡中的事件對象事件類型阻止事件進一步冒泡取 var EventUtil = { addHandler: function(element, type, handler){ if(...

1treeS 2019-08-20 18:36 評論0 收藏0
jQuery之事件綁定到觸發全過程及知識點補充

摘要：十的觸發機制被點擊了元素本身綁定了一個事件，但是是原生事件，它是靠綁定來觸發事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的還是最后的流程圖，可以試著根據流程圖手寫實現$().on()，下篇文章會放出模擬實現的代碼。一、舉例這是A 這是C ...

Jioby 2019-08-23 18:10 評論0 收藏0