js事件流、事件委托與事件階段實例詳解
前言
JavaScript 與 HTML 的交互是通過事件實現的,事件代表文檔或瀏覽器窗口中某個有意義的時刻。可以使用僅在事件發生時執行的監聽器(也叫處理程序)訂閱事件。本文總結一下 JS 中的事件相關知識點。
1、事件流
HTML 中與 javascript 交互是通過事件驅動來實現的,例如鼠標點擊事件 onclick、頁面的滾動事件 onscroll 等等,可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的,就需要瞭解一下“事件流”的概念。
事件流描述的是從頁面中接收事件的順序,DOM2 級事件流包括下面幾個階段。事件捕獲階段、處於目標階段、事件冒泡階段
(1)事件捕獲的意思是最不具體的節點應該最先收到事件,而最具體的節點應該最後收到事件。比如點擊頁面的一個div觸發的元素順序分別是document、html、body、div。可以在該階段攔截事件發生
(2)處於目標階段即捕獲到實際的目標元素階段,
(3)冒泡階段事件方向傳播,從div目標元素傳播至document元素
2、事件處理程序
事件處理程序指為響應點擊,加載,鼠標等操作而調用的函數。有很多方式指定事件處理程序。
a、通過html元素屬性指定事件處理程序
<input type="button" value="點我" onclick="console.log('我被點擊瞭')">
b、DOM0 事件處理程序,通過js獲取操作對象元素,並指定事件處理程序
<button id="btn">點我</button> <script> var btn = document.getElementById("btn") btn.onclick = function () { console.log("我被點擊瞭"); } </script>
c、DOM2 事件處理程序
addEventListener 和 removeEventListener() 是 DOM2 級事件新增的指定事件處理程序的操作,addEventListener方法都接收 3 個參數:要處理的事件名、作為事件處理程序的函數和一個佈爾值。最後這個佈爾值參數如果是true,表示在捕獲階段調用事件處理程序;如果是 false,表示在冒泡階段調用事件處理程序。IE 隻支持事件冒泡。通過 addEventListener() 添加的事件處理程序隻能使用 removeEventListener() 並傳入與添加時同樣的參數來移除。
<button id="btn">點我</button> <script> var btn = document.getElementById("btn") btn.addEventListener("click", function () { console.log("我被點擊瞭"); },false) </script>
d、IE 事件處理程序
IE 實現瞭與 DOM 類似的方法,即 attachEvent() 和 detachEvent() 。這兩個方法接收兩個同樣的參數:事件處理程序的名字和事件處理函數。
<button id="btn">點我</button> <script> var btn = document.getElementById("btn"); btn.attachEvent("onclick", function () { console.log("我被點擊瞭"); }); </script>
在 IE中使用 attachEvent() 與使用 DOM0方式的主要區別是事件處理程序的作用域。使用 DOM0方式時,事件處理程序中的 this 值等於目標元素。而使用 attachEvent() 時,事件處理程序是在全局作用域中運行的,因此 this 等window。
使用 attachEvent() 添加的事件處理程序將使用 detachEvent() 來移除,隻要提供相同的參數。
3、事件對象
a、DOM事件對象event
在 DOM 合規的瀏覽器中, event 對象是傳給事件處理程序的唯一參數。
<button id="btn">點我</button> <script> var btn = document.getElementById("btn") btn.addEventListener("click", function (event) { console.log(event); }, false) </script>
打印如下:
b、IE 事件對象
與 DOM 事件對象不同, IE 事件對象可以基於事件處理程序被指定的方式以不同方式來訪問。
如果通過DOM方式添加事件處理程序,則event 對象隻是 window 對象的一個屬性
<button id="btn">點我</button> <script> var btn = document.getElementById("btn") btn.addEventListener("click", function () { let event = window.event; console.log(event); }, false) </script>
如果通過IE事件處理程序,則 event對象會作為唯一的參數傳給處理函數
<button id="btn">點我</button> <script> var btn = document.getElementById("btn") btn.attachEvent("click", function (event) { console.log(event); }, false) </script>
4、跨瀏覽器事件處理
// 包含兼容性處理的事件處理函數 const eventUtils={ //添加事件 addEvent:function(element,type,handler){ if (elment.addEventListener) { element.addEventListener(type,handler,false) } else if(elment.attachEvent){ element.attachEvent("on"+type,handler) }else{ elment["on"+type]=handler } }, //移除事件 removeEvent:function(element,type,handler){ if(elment.removeEventListener){ element.removeEventListener(type,handler,false) }else if(element.datachEvent){ element.datachEvent("on"+type,handler) }else{ element["on"+type]=null } }, //獲取事件目標元素 getTarget:function(event){ return event.target||event.srcElement }, //獲取event對象的引用,取到事件的所有信息,確保隨時使用event getEvent:function(event){ return event||window.event }, //阻止事件(主要是事件冒泡,因為ie不支持事件捕獲) stopPropagation:function(event){ if (event.stopPropagation) { event.stopPropagation() } else { event.cancelBubble=true } }, //取消事件的默認行為(主要ie事件對象設置returnValue為false可以取消事件默認行為) preventDefault:function(event){ if (event.preventDefault) { event.preventDefault() } else { event.returnValue=false } } }
5、事件委托
簡介:事件委托指的是,不在事件的發生地(直接 dom)上設置監聽函數,而是在其父元素上設置監聽函數,通過事件冒泡,父元素可以監聽到子元素上事件的觸發,通過判斷事件發生元素 DOM 的類型,來做出不同的響應。
舉例:最經典的就是 ul 和 li 標簽的事件監聽,比如我們在添加事件時候,采用事件委托機制,不會在 li 標簽上直接添加,而是在ul 父元素上添加。因為所有的li標簽都是ul標簽的後代,在li標簽上觸發事件時,會進行事件冒泡,必定在ul標簽上接收到觸發事件處理程序,通過事件對象可以判斷具體是哪個li標簽觸發的,這樣就省去瞭重復獲取元素的代碼。
好處:比較合適動態元素的綁定,新添加的子元素也會有監聽函數,也可以有事件觸發機制。減少整個頁面所需的內存,提升整體性能
事件委托的實現
我們可以給HTMLElement對象綁定該方法delegate
HTMLElement.prototype.delegate = function(type,selector,fn){ this.addEventListener(type,function(e){ var target = e.target, bubble = true; while(bubble && target !== this){ if (filter(this,selector,target)) { bubble = fn.call(target,e); } target = target.parentNode; return bubble; } }); function filter(agent,selector,target){ var nodes = agent.querySelectorAll(selector); for (var i = 0; i < nodes.length; i++) { if (nodes[i] == target) return true; } return false; } } document.body.delegate('click','.parentNode li',function(e){ console.log(e.target); });
實際情況下,有些事件 blur,change,focus 等事件,是不支持事件冒泡的。這裡並沒有做判斷。
總結
到此這篇關於js事件流、事件委托與事件階段的文章就介紹到這瞭,更多相關js事件流、事件委托與事件階段內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 基於事件冒泡、事件捕獲和事件委托詳解
- Vue中addEventListener() 監聽事件案例講解
- 一起深入理解js中的事件對象
- 淺談JS和Nodejs中的事件驅動
- 關於js中e.preventDefault()的具體使用