谈谈你对事件冒泡和捕获的理解
事件冒泡（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 事件模型中的核心概念，捕获使事件从外到内传播，而冒泡使事件从内到外传播。合理地利用事件冒泡和捕获，结合事件委托等技术，可以提高代码的性能和可维护性。
