解釋 Javascript 中的事件冒泡和事件捕獲：如何利用？
已發表: 2020-03-26目錄
介紹
JavaScript 中用於事件流的兩個非常常見的術語是事件冒泡和事件捕獲。
這是事件在 HTML DOM API 中傳播的兩種重要方式，當兩個元素都為事件註冊句柄並且事件發生在嵌套在另一個元素中的元素中時。 元素接收事件的順序由事件傳播的模式決定。 繼續閱讀以了解 JavaScript 中事件冒泡和事件捕獲的使用，以及為什麼在網頁開發中需要這些。
關鍵要點
- 解釋術語事件、事件流、事件處理程序和事件偵聽器
- JavaScript 中的事件冒泡和事件捕獲
- JavaScript中事件冒泡和事件捕獲的實用程序
事件和事件流
HTML 網頁與 JavaScript 的交互是由用戶或瀏覽器操作頁面時發生的事件介導的。 頁面的加載、用戶單擊按鈕、關閉窗口都是事件的示例。
在網頁上接收事件的順序稱為事件流。 事件流的過程分三個步驟完成——事件捕獲（攔截事件）、事件定位（目標獲取事件）和事件冒泡（響應事件）。
JavaScript 中的事件處理程序和事件偵聽器
事件處理程序是編寫在 HTML 標記內而不是 <script> 標記內的 JavaScript 代碼。 事件處理程序在事件發生（例如按下按鈕）時執行 JavaScript。 基本語法是： name_of_handler="JavaScript code here"
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Goolge</a>
等待事件發生的過程是事件偵聽器。 JavaScript 有一個內置函數addEventListener()，它接收要監聽的事件，並在所述事件被觸發時調用第二個參數。 語法是： element.addEventListener(event, listener);
JavaScript 中的事件冒泡
事件冒泡是使用 JavaScript 開發網頁或 Web 應用程序時遇到的常見術語。 事件冒泡是事件流動過程中的一個階段，當事件從 DOM 中最具體的元素或嵌套最深的節點開始，然後向上流向最不具體的節點，即文檔。
資源
<!DOCTYPE HTML>
<html>
<頭部>
<標題>……</標題>
</head>
<正文>
<div id=”demo”> 按這裡。</div>
</正文>
</html>
單擊元素 <div> 時，“單擊”事件按以下順序發生：
- <div>
- <正文>
- <html>
- 文檔
'click' 事件觸發元素 <div>。 隨後沿著 DOM 樹向上觸發每個節點，直到到達對象文檔。
閱讀：全棧項目理念和主題
JavaScript 中的事件捕獲
事件捕獲是事件流中的另一種模型，最初由 Netscape 瀏覽器引入。 如該模型所述，事件首先由最不具體的節點接收，而最具體的節點或嵌套最深的元素最後接收事件。 在此模型中，事件在到達實際目標之前被攔截。 然而，與事件冒泡不同，現代瀏覽器缺乏對這種模型的支持，因此事件捕獲只能在特定情況下使用。
資源
參考上一節中所述的示例，單擊元素 <div> 會按以下順序觸發事件“click”：
- 文檔
- <正文>
- <html>
- <div>
事件捕獲階段會發生什麼？
在事件捕獲階段，將調用其值註冊為“true”的捕獲器偵聽器。 它是按以下方式編寫的：
el.addEventListener('點擊', 監聽器, true)
這裡捕獲了一個事件，因為監聽器的值被註冊為“true”。 如果沒有值，則默認值為“false”，結果是未捕獲事件。 因此，在這個階段，只有具有真實值的事件才會被調用並被捕獲。 在隨後的目標階段，所有註冊的偵聽器都會被調用，無論它們的值是註冊為真還是假。
JavaScript 中的 DOM 事件流
DOM Level 2 為事件流模型指定了三個階段：
- 事件捕獲階段
- 在目標
- 事件冒泡階段
資源
如果有機會攔截事件，則首先發生事件捕獲。 接下來是獲取事件的實際目標。 最終，在事件冒泡階段，對事件的最終響應發生。 參考上一節中所述的示例，單擊元素 <div> 會按照上圖所示的順序觸發事件“click”。
閱讀：印度的全棧開發人員薪水
JavaScript中事件冒泡和事件捕獲的實用程序
在事件冒泡階段，僅調用標誌值為“false”（非捕獲者）的事件。 事件冒泡和事件捕獲是 DOM 的重要方面。
el.addEventListener('Click', listener, false) // 監聽器不捕獲
el.addEventListener('Click', listener) // 監聽器不捕獲
上面的代碼舉例說明了冒泡和捕獲階段是如何工作的。 每個事件都沒有達到目標。 有些事件沒有冒泡並在目標階段後停止。 冒泡事件並非適用於所有類型的事件，偵聽器除了具有一些其他屬性，例如-e.target（引用事件的目標）和e.eventPhase（當前偵聽器在此模式下註冊）。
結論
JavaScript 中的事件流具有三個重要階段——事件捕獲階段、目標階段和事件冒泡階段。 事件捕獲是第一個發生的，如果需要，事件被截獲。 隨後是事件達到實際目標，最後階段是冒泡，此時對事件的最終響應發生。 因此，可以適當地得出結論，JavaScript 中的事件冒泡和事件捕獲是事件處理程序和事件委託所依賴的基礎。
如果您有興趣了解有關全棧的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發 PG 文憑，該文憑專為在職專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和作業，IIIT- B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。