掌握 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。