JS 事件流

事件流是 JavaScript 中的一种机制，用于管理事件的捕获和冒泡过程。事件流主要包括两个阶段：捕获阶段和冒泡阶段。

捕获阶段

捕获阶段从事件目标元素开始，然后沿事件路径向上传播到文档根元素。在这个阶段，事件处理程序可以阻止事件到达目标元素。

冒泡阶段

冒泡阶段从事件目标元素开始，然后沿事件路径向下传播到文档根元素。在这个阶段，事件处理程序可以对事件进行响应。

事件流的顺序

捕获阶段：捕获处理程序 → 目标处理程序
冒泡阶段：目标处理程序 → 冒泡处理程序

事件流的应用

阻止事件冒泡：通过在捕获阶段使用 event.stopPropagation() 方法，可以阻止事件传播到目标元素和文档根元素。
跨元素事件处理：通过在冒泡阶段使用 event.target 属性，可以处理来自子元素的事件。
自定义事件处理：通过使用 addEventListener() 方法，可以为特定元素注册自定义事件的事件处理程序。

示例

以下代码展示了如何在捕获和冒泡阶段处理事件：

document.addEventListener('click', (event) => {
  console.log('Capture phase');
}, true); // true 为捕获阶段

document.body.addEventListener('click', (event) => {
  console.log('Target phase');
}, false); // false 为冒泡阶段

document.getElementById('button').addEventListener('click', (event) => {
  console.log('Bubble phase');
});

document.getElementById('button').click();

输出结果：

Capture phase
Target phase
Bubble phase