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

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

事件流概念

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

  1. 捕获阶段:从window对象向下传播到目标元素
  2. 目标阶段:事件到达目标元素
  3. 冒泡阶段:从目标元素向上传播回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);
  }
});
相关推荐
深职第一突破口喜羊羊23 分钟前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking31 分钟前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵38 分钟前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七1 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati2 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录2 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录2 小时前
内存泄漏的“隐形杀手”
前端·性能优化