摘要:為屬性賦值匿名函數(shù)事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數(shù)如果是,表示在捕獲階段調用事件處理程序如果是,表示在冒泡階段調用事件處理程序。
事件捕獲和事件冒泡
“DOM2級事件”規(guī)定的事件流包括三個階段:事件捕獲、處于目標階段和事件冒泡。首先發(fā)生的是事件捕獲,從外部節(jié)點到內部節(jié)點依次遍歷,為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段,從目標元素逐層冒泡到外部元素,可以在這個階段對事件做出響應。IE9、 Opera、 Firefox、 Chrome 和 Safari 都支持 DOM 事件流; IE8 及更早版本不支持 DOM 事件流。
Event Handler 的常見用法事件處理程序名稱是事件名稱前加on,如onclick、onload. 為事件指定事件處理程序的方法包括:
1)HTML事件處理程序:通過HTML元素的特性指定:
最大缺點:HTML和JavaScript緊密耦合,不建議采用。
通過 JavaScript 指定事件處理程序的傳統(tǒng)方式,就是將一個函數(shù)賦值給一個事件處理程序屬性。首先必須取得一個要操作的對象的引用。每個元素(包括 window 和 document)都有自己的事件處理程序屬性,這些屬性通常全部小寫,例如 onclick。將這種屬性的值設置為一個函數(shù),就可以指定事件處理程序。
</>復制代碼
var btn = document.getElementById("myBtn");
//為屬性賦值匿名函數(shù)
btn.onclick = function(){
alert("Clicked");
};
事件作用域:使用 DOM0 級方法指定的事件處理程序被認為是元素的方法。因此,這時候的事件處理程序是在元素的作用域中運行;換句話說,程序中的 this 引用當前元素。
移除方式:刪除通過 DOM0 級方法指定的事件處理程序,只要像下面這樣將事件處理程序屬性的值設置為 null 即可:
</>復制代碼
btn.onclick = null; //刪除事件處理程序
還記得怎么刪除對象實例屬性嗎?使用delete算符,刪除后實例屬性就沒了,但是原型屬性還在。
缺點:同一個事件添加兩個事件處理程序會導致后一個覆蓋前一個。原因在于一個事件處理程序就是一個屬性,為一個屬性賦兩個值,后一個會覆蓋前一個。
“ DOM2 級事件” 定義了兩個方法,用于處理綁定和刪除事件處理程序的操作:
addEventListener()和 removeEventListener()。
所有 DOM 節(jié)點中都包含這兩個方法,并且它們都接受 3 個參數(shù):要處理的事件名(不帶on)、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是 true,表示在捕獲階段調用事件處理程序;如果是 false,表示在冒泡階段調用事件處理程序。
</>復制代碼
/*為一個按鈕添加了 onclick 事件處理程序,而且該事件會在冒泡階段被觸發(fā)*/
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
事件作用域:與 DOM0 級方法一樣,這里添加的事件處理程序也是在其依附的元素的作用域中運行。使用 DOM2 級方法添加事件處理程序的主要好處是可以添加多個事件處理程序,多事件處理程序會按照添加它們的順序觸發(fā)。IE9、 Firefox、 Safari、 Chrome 和 Opera 支持 DOM2 級事件處理程序,對IE8及以下版本有專用事件處理程序。
移除方式:通過 addEventListener()添加的事件處理程序只能使用 removeEventListener()來移除;移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。這也意味著通過 addEventListener()添加的匿名函數(shù)將無法通過removeEventListener()移除,這是因為匿名函數(shù)每次出現(xiàn)都是一次調用,命名函數(shù)每次出現(xiàn)是一次引用。因此建議使用命名函數(shù)作為eventhandler的函數(shù)參數(shù)。
大多數(shù)情況下,都是將事件處理程序添加到事件流的冒泡階段(最后一個參數(shù)是false),這樣可以最大限度地兼容各種瀏覽器,jQuery和React使用冒泡機制,解決了兼容性問題。
IE 實現(xiàn)了與 DOM 中類似的兩個方法: attachEvent()和 detachEvent()。這兩個方法接受相同的兩個參數(shù):事件處理程序名稱與事件處理程序函數(shù)。由于 IE8 及更早版本只支持事件冒泡,所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段(DOM2標準建議采用冒泡階段,但是也可以采用捕獲階段)。
</>復制代碼
var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){ //注意使用了帶on的事件名和匿名函數(shù)
alert("Clicked");
});
注意:(a) attachEvent()的第一個參數(shù)是"onclick",而非 DOM 的 addEventListener()方法中的"click"。(b) 在使用 attachEvent()方法的情況下,事件處理程序會在全局作用域中運行,因此 this 等于 window。在使用 DOM0 和DOM2標準方法的情況下,事件處理程序會在其所屬元素的作用域內運行。(c)默認添加在在冒泡階段。(d)可以添加多個事件處理程序,多個事件處理程序的執(zhí)行順序和DOM2 相反,也就是和添加順序相反。
</>復制代碼
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
移除:使用 attachEvent()添加的事件可以通過 detachEvent()來移除,條件是必須提供相同的參數(shù)。與 DOM 方法一樣,這也意味著添加的匿名函數(shù)將不能被移除。不過,只要能夠將對相同命名函數(shù)的引用傳給 detachEvent(),就可以移除相應的事件處理程序。
5) 跨瀏覽器的事件處理程序可以通過能夠隔離瀏覽器差異的JavaScript庫或者創(chuàng)建兼容各大瀏覽器差異的事件處理方法,庫使用可以參照jQuery,這里不介紹。兼容各大瀏覽器差異的事件處理方法包括addHandler()和removeHandler(),都屬于EvenUtil對象,接收相同的參數(shù):要操作的元素、事件名稱、事件處理程序函數(shù)。
這兩個方法首先都會檢測傳入的元素中是否存在 DOM2 級方法。如果存在 DOM2 級方法,則使用該方法:傳入事件類型、事件處理程序函數(shù)和第三個參數(shù) false(表示冒泡階段)。如果存在的是 IE 的方法,則采取第二種方案。注意,為了在 IE8 及更早版本中運行,此時的事件類型必須加上"on"前綴。最后一種可能就是使用 DOM0 級方法(在現(xiàn)代瀏覽器中,應該不會執(zhí)行這里的代碼)。此時,我們使用的是方括號語法來將屬性名指定為事件處理程序(add),或者將屬性設置為 null(remove)。
使用方法如下:
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/50115.html
摘要:事件流事件流描述的是頁面接收事件的順序的事件流是冒泡流而的事件流是事件捕獲流事件冒泡是指事件開始時由最具體的元素,然后向上傳播到較為不具體的節(jié)點所有現(xiàn)代瀏覽器都支持事件冒泡則將事件一直冒泡到對象事件捕獲是不太具體的節(jié)點應該更早接收到事件而具 事件流 事件流描述的是頁面接收事件的順序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕獲流. 事件冒泡是指...
摘要:事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實現(xiàn)自定義事件實現(xiàn)自定義事件的原理是創(chuàng)建一個管理事件的對象如下代碼是事件的定義存儲事件處理程序由個鍵值對組成鍵表示事件名值是一個由事件處理程序組成的數(shù)組添加事件觸發(fā)事件將傳遞給 事件定義 事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實現(xiàn)自定義事件.實現(xiàn)自定義事件的原理是創(chuàng)建一個管理事件的對象.如下代碼...
摘要:一起源方法最終是用綁定事件的而方法正是等于二作用觸發(fā)綁定的事件的處理程序源碼源碼行即原生觸發(fā)事件的處理程序修正對象獲取事件的處理程序集合,結構如下從數(shù)據(jù)緩存中獲取事件處理集合即目標元素委托目標這段代碼壓根不會執(zhí)行,因為全局搜索沒找到結構 showImg(https://segmentfault.com/img/remote/1460000019464031); 一、起源jQuery.e...
摘要:第三個參數(shù)表示在冒泡階段調用事件處理程序,默認值為中的事件對象事件處理程序當前程序綁定的那個元素事件處理程序內部,的值始終等于的值事件發(fā)生的具體元素事件類型取消事件的默認行為取消事件的進一步捕獲或冒泡中的事件對象事件類型阻止事件進一步冒泡取 var EventUtil = { addHandler: function(element, type, handler){ if(...
摘要:十的觸發(fā)機制被點擊了元素本身綁定了一個事件,但是是原生事件,它是靠綁定來觸發(fā)事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言:最重要的還是最后的流程圖,可以試著根據(jù)流程圖手寫實現(xiàn)$().on(),下篇文章會放出模擬實現(xiàn)的代碼。 一、舉例 這是A 這是C ...
閱讀 1139·2023-04-26 02:46
閱讀 636·2023-04-25 19:38
閱讀 650·2021-10-14 09:42
閱讀 1249·2021-09-08 09:36
閱讀 1367·2019-08-30 15:44
閱讀 1331·2019-08-29 17:23
閱讀 2252·2019-08-29 15:27
閱讀 813·2019-08-29 14:15