掌握 JavaScript 中的事件冒泡與捕獲

JavaScript 中的事件冒泡與捕獲

JavaScript 中的事件傳播描述了事件被觸發後流經 DOM 的方式。主要有兩個階段：事件冒泡和事件擷取。理解這些概念對於有效管理事件監聽器至關重要。

---

1.事件傳播階段

當事件被觸發時，它會按以下順序在 DOM 中傳播：

1. 捕獲階段：事件從 DOM 樹的根向下傳播到目標元素。
2. 目標階段：事件到達目標元素。
3. 冒泡階段：事件從目標元素回到根元素。

---

2.事件冒泡

在冒泡階段，事件從目標元素開始，並透過其祖先元素向上冒泡。

範例：

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

點選按鈕時輸出：

Child clicked
Parent clicked

• 事件從按鈕冒泡到 div。

停止冒泡

使用 stopPropagation() 方法阻止事件進一步傳播。

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

3.事件捕捉（滴流）

在捕獲階段，事件從 DOM 樹的根向下傳播到目標元素。

範例：

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

點選按鈕時輸出：

Parent clicked
Child clicked

• 該事件在到達子級之前由父級捕獲。

---

4.比較冒泡與捕獲

功能 事件冒泡 事件捕獲 標題>

Feature	Event Bubbling	Event Capturing
Order	From target to ancestors	From root to target
Default Behavior	Enabled	Disabled unless specified
Use Case	Commonly used for delegation	Less commonly used

訂單 從目標到祖先 從根到目標 預設行為 已啟用 除非指定否則停用 用例 常用於委託 不太常用 表>

---

5.活動代表團

事件委託利用事件冒泡來有效處理多個子元素的事件。

範例：

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• ul 上的單一事件監聽器處理所有 li 元素的點擊。

---

6.防止預設行為

使用 PreventDefault() 方法來停止元素的預設行為而不影響傳播。

範例：

Child clicked
Parent clicked

---

7.實際用例：表單驗證

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

8.總結

• 事件冒泡將事件從目標元素向上傳播到祖先。
• 事件捕獲將事件從根向下傳播到目標元素。
• 使用 stopPropagation() 停止傳播並使用 PreventDefault() 取消預設操作。
• 事件委託是一種有效管理動態元素事件的強大技術。

掌握事件冒泡和捕獲可確保更好地控制事件驅動的應用程式並提高程式碼效率。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。