事件流模型概述
JavaScript 中的事件流模型主要有两种阶段：捕获阶段和冒泡阶段。这两种阶段是 JavaScript 事件模型的核心部分。理解这些事件流的工作原理有助于我们更好地控制事件的处理和传递。事件流模型是 DOM 事件处理机制的基础，它决定了事件如何在 DOM 树中传播。
1. 事件流的两个主要阶段
捕获阶段
捕获阶段，也叫事件捕获阶段，是事件流的第一阶段。在这一阶段，事件从 window 对象开始逐层向下传播，最终到达事件源（即触发事件的 DOM 元素）。在捕获阶段，事件先传递到父元素，然后才传递到子元素。
例如，当点击一个嵌套在其他元素中的按钮时，事件会从最外层的容器开始传递，一直到按钮元素。这一过程称为事件的捕获。
冒泡阶段
冒泡阶段是事件流的第二阶段。在这一阶段，事件从事件源（触发事件的 DOM 元素）开始，逐层向上传播，最终到达 window 对象。与捕获阶段不同，冒泡阶段是从目标元素开始，逐步向父元素、祖先元素传播。
例如，点击按钮时，事件会先在按钮元素上处理，之后再传递到它的父元素，直到 window 对象。
2. 事件流的顺序
- 捕获阶段：从
window开始，逐级向下传递到事件的目标元素。 - 目标阶段：事件到达目标元素，目标元素处理该事件。
- 冒泡阶段：事件从目标元素开始，逐级向上传递到
window。
3. 事件流的默认行为
事件流的传播行为可以通过两种方式来控制：事件捕获和事件冒泡。在没有特别的设置时，事件默认是从事件源向上冒泡。如果需要更改事件的流动方式，可以使用 addEventListener 方法的第三个参数来指定。
// 捕获阶段
element.addEventListener('click', function() {
console.log('捕获阶段');
}, true); // 第三个参数为 true 表示捕获阶段
// 冒泡阶段
element.addEventListener('click', function() {
console.log('冒泡阶段');
}, false); // 第三个参数为 false 或不传则是冒泡阶段
4. 事件传播控制
JavaScript 提供了 event.stopPropagation() 和 event.stopImmediatePropagation() 方法来控制事件传播。
event.stopPropagation()：停止事件的进一步传播，阻止事件冒泡或者捕获。event.stopImmediatePropagation()：除了阻止事件传播外，还阻止当前事件的其他监听器被触发。
例如，下面的代码演示了如何停止事件冒泡：
element.addEventListener('click', function(event) {
event.stopPropagation();
console.log('事件冒泡被停止');
});
5. 捕获与冒泡的应用场景
捕获阶段的应用
捕获阶段通常用于需要在事件到达目标元素之前做出一些处理的场景。例如，在处理用户输入时，可能需要在事件到达目标元素之前进行验证或者修改。例如，阻止表单提交或修改某些元素的样式。
冒泡阶段的应用
冒泡阶段则更多地用于实现事件委托。例如，在一个列表中，如果有很多子元素需要绑定事件监听器，使用事件委托可以将事件绑定到父元素上，通过事件冒泡机制捕获子元素的事件，从而减少绑定的事件数量，提高性能。
document.querySelector('#parent').addEventListener('click', function(event) {
if (event.target.matches('.child')) {
console.log('点击了子元素');
}
});
6. 事件委托
事件委托是指将事件监听器添加到父元素上，而不是为每个子元素单独绑定事件监听器。事件委托基于事件的冒泡机制工作，当事件从子元素冒泡到父元素时，父元素捕获到事件并处理。
通过事件委托，我们可以避免为每个子元素单独绑定事件监听器，节省性能，并且能够动态地处理新加入的子元素。
例如：
<div id="parent">
<button class="child">按钮1</button>
<button class="child">按钮2</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target && event.target.matches('button.child')) {
alert('按钮被点击了: ' + event.target.textContent);
}
});
</script>
7. 事件流的优先级
JavaScript 中事件的触发顺序和优先级取决于绑定事件的顺序。若同一事件类型绑定多个处理函数，事件的传播顺序决定了哪个函数会先执行。
- 如果
true参数传给addEventListener，事件会在捕获阶段触发处理函数。 - 如果
false或不传参，事件会在冒泡阶段触发处理函数。
8. 总结
JavaScript 的事件流模型是事件从触发元素到父元素，或从父元素到目标元素的传播过程。事件流包含捕获阶段、目标阶段和冒泡阶段。通过合理地使用捕获和冒泡，可以控制事件的流动方向，实现更高效的事件处理。利用事件委托，我们可以简化事件处理，减少内存消耗并提高性能。事件流的理解对于开发交互性强的 Web 应用程序至关重要。
通过精确控制事件流和利用事件委托模式，可以为现代 Web 应用提供更高效、清晰的事件处理机制。
