在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析

在 JavaScript 中,事件传播分为三个阶段:捕获阶段(Capture Phase)目标阶段(Target Phase)冒泡阶段(Bubble Phase)addEventListener 的第三个参数可以控制事件监听器是在捕获阶段还是冒泡阶段触发。

1. 捕获阶段(Capture Phase)

  • 从外向内传播 :事件从最外层的祖先元素(window)向下逐级传递到目标元素。
  • 监听方式 :将 addEventListener 的第三个参数设为 true{ capture: true }
  • 特点:先执行捕获阶段的监听器,再执行目标阶段的事件,最后执行冒泡阶段的监听器。

2. 冒泡阶段(Bubble Phase)

  • 从内向外传播:事件从目标元素向上逐级传递到最外层的祖先元素。
  • 默认行为 :如果 addEventListener 的第三个参数未设置或设为 false/{ capture: false },监听器会在冒泡阶段触发。
  • 特点 :大多数事件默认支持冒泡(如 click),但少数事件(如 focus)不冒泡。

区别总结

特征 捕获阶段 冒泡阶段
传播方向 外层 → 目标元素(向下) 目标元素 → 外层(向上)
addEventListener 第三个参数设为 true 第三个参数为 false(默认)
执行顺序 先于冒泡阶段 后于捕获阶段
常见用途 提前拦截事件(如权限检查) 常规事件处理(如委托)

代码示例

html 复制代码
<div id="parent">
  <div id="child">点击我</div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // 捕获阶段监听(第三个参数为 true)
  parent.addEventListener('click', () => {
    console.log('父元素 - 捕获阶段');
  }, true);

  // 冒泡阶段监听(默认)
  parent.addEventListener('click', () => {
    console.log('父元素 - 冒泡阶段');
  });

  child.addEventListener('click', () => {
    console.log('子元素 - 目标阶段');
  });
</script>

输出结果(点击子元素时):

复制代码
父元素 - 捕获阶段
子元素 - 目标阶段
父元素 - 冒泡阶段

应用场景

  1. 事件委托(冒泡阶段)
    通过父元素监听子元素的事件(如动态生成的列表项)。
  2. 拦截操作(捕获阶段)
    在事件到达目标前进行拦截(如权限验证、阻止默认行为)。

注意事项

  • 使用 event.stopPropagation() 可阻止事件继续传播(捕获或冒泡)。
  • 目标元素的事件监听器(如 child)在目标阶段触发,与第三个参数无关。
相关推荐
jingling555几秒前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
你的电影很有趣3 分钟前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
没有bug.的程序员25 分钟前
Spring Boot 起步:自动装配的魔法
java·开发语言·spring boot·后端·spring·1024程序员节
面向星辰1 小时前
windows配置hadoop环境
java·开发语言
重铸码农荣光1 小时前
JavaScript 变量声明:从 var 到 let/const 的进化与深思
javascript
Elieal2 小时前
Java的Collection 集合体系详解
java·开发语言
韭菜炒大葱2 小时前
🌟 var、let与const:JavaScript变量声明的前世今生
javascript·面试
奶酪博士2 小时前
【html】每日打卡页面
html·1024程序员节
元直数字电路验证2 小时前
HTML 标签及推荐嵌套结构
前端·javascript·html