詳解JS瀏覽器事件模型
我想你很可能聽說過事件驅動, 但是事件驅動到底是什么？為什么說瀏覽器是事件驅動的呢？
事件驅動通俗地來說就是什么都抽象為事件。
一次點擊是一個事件 鍵盤按下是一個事件 一個網絡請求成功是一個事件 頁面加載是一個事件 頁面報錯是一個事件瀏覽器依靠事件來驅動APP運行下去，如果沒有了事件驅動，那么APP會直接從頭到尾運行完，然后結束，事件驅動是瀏覽器的基石。
一個簡單的例子其實現實中的紅綠燈就是一種事件，它告訴我們現在是紅燈狀態，綠燈狀態，還是黃燈狀態。 我們需要根據這個事件自己去完成一些操作，比如紅燈和黃燈我們需要等待，綠燈我們可以過馬路。
下面我們來看一個最簡單的瀏覽器端的事件：
html代碼：
<button>Change color</button>
js代碼：
var btn = document.querySelector(’button’);btn.onclick = function() { console.log(’button clicked’)}
代碼很簡單，我們在button上注冊了一個事件，這個事件的handler是一個我們定義的匿名函數。當用戶點擊了這個被注冊了事件的button的時候，這個我們定義好的匿名函數就會被執行。
如何綁定事件我們有三種方法可以綁定事件，分別是行內綁定，直接賦值，用addEventListener。
內聯這個方法非常不推薦
html代碼：
<button onclick='handleClick()'>Press me</button>
然后在script標簽內寫：
function handleClick() { console.log(’button clicked’)}
直接賦值
和我上面舉的例子一樣：
var btn = document.querySelector(’button’);btn.onclick = function() { console.log(’button clicked’)}
這種方法有兩個缺點
不能添加多個同類型的handler
btn.onclick = functionA;btn.onclick = functionB;
這樣只有functionB有效，這可以通過addEventListener來解決。
不能控制在哪個階段來執行，這個會在后面將事件捕獲/冒泡的時候講到。這個同樣可以通過addEventListener來解決。
因此addEventListener橫空出世，這個也是目前推薦的寫法。
addEventListener
舊版本的addEventListener第三個參數是bool，新版版的第三個參數是對象，這樣方便之后的擴展，承載更多的功能, 我們來重點介紹一下它。
addEventListener可以給Element，Document，Window，甚至XMLHttpRequest等綁定事件，當指定的事件發生的時候，綁定的回調函數就會被以某種機制進行執行，這種機制我們稍后就會講到。
語法：
target.addEventListener(type, listener[, options]);target.addEventListener(type, listener[, useCapture]);target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
type是你想要綁定的事件類型，常見的有click, scroll, touch, mouseover等，舊版本的第三個參數是bool，表示是否是捕獲階段，默認是false，即默認為冒泡階段。新版本是一個對象，其中有capture（和上面功能一樣），passive和once。 once用來執行是否只執行一次，passive如果被指定為true表示永遠不會執行preventDefault(),這在實現絲滑柔順的滾動的效果中很重要。更多請參考Improving scrolling performance with passive listeners
框架中的事件實際上，我們現在大多數情況都是用框架來寫代碼，因此上面的情況其實在現實中是非常少見的，我們更多看到的是框架封裝好的事件，比如react的合成事件，感興趣的可以看下這幾篇文章。
React SyntheticEvent Vue和React的優點分別是什么？兩者的最核心差異對比是什么？雖然我們很少時候會接觸到原生的事件，但是了解一下事件對象，事件機制，事件代理等還是很有必要的，因為框架的事件系統至少在這方面還是一致的，這些內容我們接下來就會講到。
事件對象所有的事件處理函數在被瀏覽器執行的時候都會帶上一個事件對象，舉個例子：
function handleClick(e) { console.log(e);} btn.addEventListener(’click’, handleClick);
這個e就是事件對象，即event object。 這個對象有一些很有用的屬性和方法，下面舉幾個常用的屬性和方法。
屬性
target x, y等位置信息 timeStamp eventPhase方法
preventDefault 用于阻止瀏覽器的默認行為，比如a標簽會默認進行跳轉，form會默認校驗并發送請求到action指定的地址等 stopPropagation 用于阻止事件的繼續冒泡行為，后面講事件傳播的時候會提到。事件傳播前面講到了事件默認是綁定到冒泡階段的，如果你顯式令useCapture為true，則會綁定到捕獲階段。
事件捕獲很有意思，以至于我會經常出事件的題目加上一點事件傳播的機制，讓候選人進行回答，這很能體現一個人的水平。了解事件的傳播機制，對于一些特定問題有著非常大的作用。
一個Element上綁定的事件觸發了，那么其實會經過三個階段。
第一個階段 - 捕獲階段
從最外層即HTML標簽開始，檢查當前元素有沒有綁定對應捕獲階段事件，如果有則執行，沒有則繼續往里面傳播，這個過程遞歸執行直到觸達觸發這個事件的元素為止。
偽代碼：
function capture(e, currentElement) { if (currentElement.listners[e.type] !== void 0) {currentElement.listners[e.type].forEach(fn => fn(e)) } // pass down if (currentElement !== e.target) {// getActiveChild用于獲取當前事件傳播鏈路上的子節點capture(e, getActiveChild(currentElement, e)) } else {bubble(e, currentElement) }}// 這個Event對象由引擎創建capture(new Event(), document.querySelector(’html’))
第二個階段 - 目標階段
上面已經提到了，這里省略了。
第三個階段 - 冒泡階段
從觸發這個事件的元素開始，檢查當前元素有沒有綁定對應冒泡階段事件，如果有則執行，沒有則繼續往里面傳播，這個過程遞歸執行直到觸達HTML為止。
偽代碼：
function bubble(e, currentElement) { if (currentElement.listners[e.type] !== void 0) {currentElement.listners[e.type].forEach(fn => fn(e)) } // returning if (currentElement !== document.querySelector(’html’)) {bubble(e, currentElement.parent) }}
上述的過程用圖來表示為：
如果你不希望事件繼續冒泡，可以用之前我提到的stopPropagation。
偽代碼：
function bubble(e, currentElement) { let stopped = false; function cb() {stopped = true; } if (currentElement.listners[e.type] !== void 0) {currentElement.listners[e.type].forEach(fn => { fn({...e,stopPropagation: cb }); if (stopped) return;}) } // returning if (currentElement !== document.querySelector(’html’)) {bubble(e, currentElement.parent) }}事件代理
利用上面提到的事件冒泡機制，我們可以選擇做一些有趣的東西。 舉個例子：
我們有一個如下的列表，我們想在點擊對應列表項的時候，輸出是點擊了哪個元素。
HTML代碼：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>
JS代碼：
document.querySelector(’ul’).addEventListener(’click’, e => console.log(e.target.innerHTML))
在線地址，上面說了addEventListener會默認綁定到冒泡階段，因此事件會從目標階段開始，向外層冒泡，到我們綁定了事件的ul上，ul中通過事件對象的target屬性就能獲取到是哪一個元素觸發的。
“事件會從目標階段開始”，并不是說事件沒有捕獲階段，而是我們沒有綁定捕獲階段，我描述給省略了。
我們只給外層的ul綁定了事件處理函數，但是可以看到li點擊的時候，實際上會打印出對應li的內容（1，2，3或者4）。 我們無須給每一個li綁定事件處理函數，不僅從代碼量還是性能上都有一定程度的提升。
這個有趣的東西，我們給了它一個好聽的名字“事件代理”。在實際業務中我們會經常使用到這個技巧，這同時也是面試的高頻考點。
總結事件其實不是瀏覽器特有的，和JS語言也沒有什么關系，這也是我為什么沒有將其劃分到JS部分的原因。很多地方都有事件系統，但是各種事件模型又不太一致。
我們今天講的是瀏覽器的事件模型，瀏覽器基于事件驅動，將很多東西都抽象為事件，比如用戶交互，網絡請求，頁面加載，報錯等，可以說事件是瀏覽器正常運行的基石。
我們在使用的框架都對事件進行了不同程度的封裝和處理，除了了解原生的事件和原理，有時候了解一下框架本身對事件的處理也是很有必要的。
當發生一個事件的時候，瀏覽器會初始化一個事件對象，然后將這個事件對象按照一定的邏輯進行傳播，這個邏輯就是事件傳播機制。 我們提到了事件傳播其實分為三個階段，按照時間先后順序分為捕獲階段，目標階段和冒泡階段。開發者可以選擇監聽不同的階段，從而達到自己想要的效果。
事件對象有很多屬性和方法，允許你在事件處理函數中進行讀取和操作，比如讀取點擊的坐標信息，阻止冒泡等。
最后我們通過一個例子，說明了如何利用冒泡機制來實現事件代理。
以上就是詳解JS瀏覽器事件模型的詳細內容，更多關于JS瀏覽器事件模型的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備