VScode插件：前端每日一题

最新推荐文章于 2025-12-19 22:08:57 发布

原创最新推荐文章于 2025-12-19 22:08:57 发布 · 585 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #前端 #ide #javascript

VsCode前端每日一题专栏收录该内容

45 篇文章

订阅专栏

谈谈你对事件冒泡和捕获的理解

事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是 JavaScript 中两种事件传播机制，用于确定事件在 DOM 层次结构中传递的顺序。它们帮助我们更灵活地管理和控制用户的交互。

1. 事件捕获

事件捕获是指当事件触发时，事件先从最顶层的父级元素开始向目标元素传播。它遵循 “从外向内”的顺序。

在事件捕获阶段，浏览器会从 window、document 等根元素开始向下查找，逐级传递到触发事件的目标元素。在这个过程中，我们可以在父级元素上捕获到事件，适合对外层容器进行事件管理。

2. 事件冒泡

事件冒泡是指事件在目标元素上触发后，从目标元素向上逐级传递到最顶层的父级元素。它遵循 “从内向外”的顺序。

事件冒泡的过程发生在事件捕获之后。在冒泡阶段中，子元素触发的事件会传递给父级元素和祖先元素，直到根元素（如 document）。这使得我们可以在父级元素上通过监听冒泡事件，实现统一的事件处理。

事件传播顺序

事件传播过程分为三个阶段：

捕获阶段：事件从根元素向目标元素传播（从外到内）。
目标阶段：事件在目标元素上触发。
冒泡阶段：事件从目标元素向根元素传播（从内到外）。

默认情况下，JavaScript 事件监听会在冒泡阶段触发，但可以通过设置监听器的 capture 参数为 true 来在捕获阶段触发监听器。

3. 捕获和冒泡的用例

事件捕获：适用于一些事件必须先在外层元素处理，才能传递给内部的情况。例如，表单验证事件可以在捕获阶段拦截。
事件冒泡：适合在父级元素上进行事件委托（Event Delegation），可以避免为大量子元素分别绑定事件监听器。父级元素通过冒泡捕获事件，并在其中判断事件来源。

示例:

<div id="outer">
  Outer
  <div id="inner">
    Inner
    <button id="button">Click Me</button>
  </div>
</div>

// 捕获阶段监听
document.getElementById('outer').addEventListener('click', () => {
  console.log('Outer capture');
}, true);

document.getElementById('inner').addEventListener('click', () => {
  console.log('Inner capture');
}, true);

// 冒泡阶段监听
document.getElementById('outer').addEventListener('click', () => {
  console.log('Outer bubble');
});

document.getElementById('inner').addEventListener('click', () => {
  console.log('Inner bubble');
});

document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

假如点击 button 元素，输出顺序为：

Outer capture
Inner capture
Button clicked
Inner bubble
Outer bubble

4. stopPropagation 和 stopImmediatePropagation

stopPropagation：用于阻止事件继续冒泡或捕获，适合在事件冒泡阶段终止事件传播。
stopImmediatePropagation：不仅阻止事件的冒泡，还会阻止当前元素上其他事件监听器的执行。

总结

事件冒泡和捕获是 JavaScript 事件模型中的核心概念，捕获使事件从外到内传播，而冒泡使事件从内到外传播。合理地利用事件冒泡和捕获，结合事件委托等技术，可以提高代码的性能和可维护性。