Event -- 事件 · 前端知識 -- 學習整理

>[success] # Event -- 事件 1. 元素有一系列屬性事件可以和用戶進行交互例如是`onclick` 等，因此直接在dom上使用用法 ~~~ <div onclick="console.log('c')">點擊</div> ~~~ 2. 因為這類事件是元素上的屬性，因此也可以通過獲取當前元素**事件屬性**進行事件綁定 ~~~ <div>點擊</div> <script> const divDom = document.querySelector('div') divDom.onclick = function () { console.log('c') } </script> ~~~ 3. 第二種因為是對象屬性賦值形式，因此同一個元素同一個事件進行賦值會導致后者蓋住前者的事件例如 ~~~ <div>點擊</div> <script> const divDom = document.querySelector('div') divDom.onclick = function () { console.log('c') } divDom.onclick = function () { console.log('只會執行我') } </script> ~~~ 因此需要使用**EventTarget中的addEventListener來監聽** ~~~ <div>點擊</div> <script> const divDom = document.querySelector('div') divDom.addEventListener('click', function () { console.log(123) }) divDom.addEventListener('click', function () { console.log(456) }) </script> ~~~ >[info] ## 常見的事件列表 * **鼠標事件**： 1. **click** —— 當鼠標點擊一個元素時（觸摸屏設備會在點擊時生成）。 2. **mouseover / mouseout** —— 當鼠標指針移入/離開一個元素時。 3. **mousedown / mouseup** —— 當在元素上按下/釋放鼠標按鈕時。 4. **mousemove** —— 當鼠標移動時。 * **鍵盤事件**： 1. **keydown 和 keyup** —— 當按下和松開一個按鍵時。 * **表單（form）元素事件**： 1. **submit** —— 當訪問者提交了一個時。 2. **focus** —— 當訪問者聚焦于一個元素時，例如聚焦于一個。 * **Document 事件**： 1. **DOMContentLoaded** —— 當 HTML 的加載和處理均完成，DOM 被完全構建完成時。 * **CSS 事件**： 1. **transitionend** —— 當一個 CSS 動畫完成時。 >[success] # 事件冒泡和事件捕獲 1. 事件是從**最內層向外**依次傳遞的順序，這個順序我們稱之為**事件冒泡（Event Bubble）** 2. 事件是從**外層到內層**，這種稱之為**事件捕獲（Event Capture）** * 注：**IE**采用了**事件冒泡**的方式，**Netscape**采用了**事件捕獲**的方式，現在瀏覽器兩種形式都支持默認是**事件冒泡** 3. 二者同時開啟時候執行順序 3.1. 捕獲階段 =》到觸發元素 =》冒泡階段 ![](https://img.kancloud.cn/95/31/95310e3abc000e9422ef13a5998ef86e_673x673.png) ![](https://img.kancloud.cn/d4/33/d433f975726627a8be6bfe39ab8bd8a2_242x155.png) ~~~ <!DOCTYPE html> <html lang="en" style="height: 200%"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <body> <div class="box"> <span>點擊</span> </div> <script> const divDom = document.querySelector('div') const spanDom = document.querySelector('span') const bodyDom = document.querySelector('body') bodyDom.addEventListener('click', function () { console.log('body--冒泡') }) divDom.addEventListener('click', function () { console.log('div--冒泡') }) spanDom.addEventListener('click', function () { console.log('span--冒泡') }) bodyDom.addEventListener( 'click', function () { console.log('body--捕獲') }, true ) divDom.addEventListener( 'click', function () { console.log('div--捕獲') }, true ) spanDom.addEventListener( 'click', function () { console.log('span--捕獲') }, true ) </script> </body> </html> ~~~ >[success] # 事件委托 1. 基于**事件冒泡機**制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是**事件委托**。 2. 什么是事件冒泡,'https://segmentfault.com/a/1190000005654451' 簡單的說,事件會從最內層的元素開始發生，一直向上傳播，直到document對象 >[danger] ##### 分析 ~~~ 1.現在有一個列表如果我們在每個元素上都進行監聽事件,那么綁定事件的數量和列表長度一致,也就說列表長度1w 那么就要綁定1w事件 2.使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數, 這樣的好處 2.1.綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定 2.2.將事件委托給父節點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進行事件綁定。 2.3.用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。 ~~~ >[danger] ##### 注意在document.body上進行事件委托問題 ~~~ 需要注意的是，如果我們直接在document.body上進行事件委托，可能會帶來額外的問題。由于瀏覽器在進行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區域進行標記，被標記的區域會與主線程進行通信。如果我們document.body上被綁定了事件，這時候整個頁面都會被標記。即使我們的頁面不關心某些部分的用戶交互，合成器線程也必須與主線程進行通信，并在每次事件發生時進行等待。這種情況，我們可以使用passive: true選項來解決。 ~~~ >[danger] ##### 新的思考 [vue 在 v-for 時給每項元素綁定事件需要用事件代理嗎？為什么？](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/145) [ vue是否需要事件委托？](https://forum.vuejs.org/t/is-event-delegation-necessary/3701/4) [vue 事件委托的一個小案例,看評論](https://segmentfault.com/a/1190000011698763) >[success] # 關于addEventListener/removeEventListener/dispatchEvent 1. 所有的節點、元素和`Window`都繼承自**EventTarget** 2. **EventTarget**是一個DOM接口，主要用于添加、刪除、派發Event事件 3. EventTarget常見的方法 3.1. **addEventListener**：注冊某個事件類型以及事件處理函數； 3.2. **removeEventListener**：移除某個事件類型以及事件處理函數； 3.3. **dispatchEvent**：派發某個事件類型到EventTarget上； ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // eventtarget就可以實現類似于事件總線的效果 window.addEventListener("aaa", function() { console.log("aaa~") }) setTimeout(function() { window.dispatchEvent(new Event("aaa")) }, 5000) </script> </body> </html> ~~~