JavaScript事件流机制详解：捕获、冒泡与阻止传播

事件流概念

事件流描述的是事件在DOM结构中传播的路径和顺序。当DOM元素触发事件时，事件会经历三个阶段：

捕获阶段：从window对象向下传播到目标元素
目标阶段：事件到达目标元素
冒泡阶段：从目标元素向上传播回window对象

html 复制代码

<div class="grandparent">
  <div class="parent">
    <div class="child">点击我</div>
  </div>
</div>

事件捕获

事件捕获是从最外层祖先元素开始，逐级向下传播到目标元素的过程：

javascript 复制代码

document.querySelector('.grandparent').addEventListener('click', () => {
  console.log('祖父元素捕获');
}, true); // 第三个参数true表示捕获阶段触发

document.querySelector('.parent').addEventListener('click', () => {
  console.log('父元素捕获');
}, true);

document.querySelector('.child').addEventListener('click', () => {
  console.log('子元素目标');
}, true);

点击子元素时输出顺序：

复制代码

祖父元素捕获
父元素捕获
子元素目标

事件冒泡

事件冒泡是默认行为，从目标元素向上传播到祖先元素：

javascript 复制代码

document.querySelector('.grandparent').addEventListener('click', () => {
  console.log('祖父元素冒泡');
}); // 默认false，冒泡阶段触发

document.querySelector('.parent').addEventListener('click', () => {
  console.log('父元素冒泡');
});

document.querySelector('.child').addEventListener('click', () => {
  console.log('子元素目标');
});

点击子元素时输出顺序：

复制代码

子元素目标
父元素冒泡
祖父元素冒泡

阻止事件冒泡

使用event.stopPropagation()可以阻止事件继续传播：

javascript 复制代码

document.querySelector('.child').addEventListener('click', (e) => {
  console.log('子元素点击');
  e.stopPropagation(); // 阻止冒泡
});

document.querySelector('.parent').addEventListener('click', () => {
  console.log('这行不会执行');
});

实际应用案例

事件委托：利用冒泡机制在父元素上统一处理子元素事件

javascript 复制代码

document.querySelector('ul').addEventListener('click', (e) => {
  if(e.target.tagName === 'LI') {
    console.log('点击了列表项:', e.target.textContent);
  }
});