事件冒泡是子元素事件向父级逐层传递至document的过程；点击#child时路径为#child→#parent→#grand→body→document；需各层监听事件且不调用stoppropagation()，document监听应使用addeventlistener('click', handler)默认冒泡模式。

事件冒泡是 JavaScript 中事件传播的默认行为之一：当子元素上的事件被触发时，该事件会依次向父级元素传递，直到 document（或 window），只要各级祖先元素都监听了同一类型的事件。

冒泡路径是怎么走的？

假设 DOM 结构如下：

  

    点我
  

点击 #child 时，事件流为：
#child → #parent → #grand → body → document

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

如何让事件自然冒泡到 document？

• 子元素和所有中间父元素都不调用 event.stopPropagation() 或 event.stopImmediatePropagation()
• 确保各层级（包括 document）都通过 addEventListener 监听了对应事件（如 'click'）
• 使用捕获阶段以外的监听方式（即第三个参数为 false 或省略）——这是默认的冒泡阶段

在 document 上监听冒泡点击事件的写法

推荐用以下方式监听，能捕获任意子元素冒泡上来的点击：

document.addEventListener('click', function (e) {
  console.log('触发元素：', e.target);
  console.log('当前处理元素：', e.currentTarget); // 始终是 document
});

注意：e.target 是真正被点击的最深子元素（比如按钮），而 e.currentTarget 是当前绑定监听器的对象（这里是 document）。

什么情况下会中断冒泡？

• 在任一处理函数中执行 e.stopPropagation() —— 阻止继续向上传递
• 使用 return false 在 jQuery 中等效于阻止冒泡+阻止默认行为（原生 JS 不生效）
• 用 addEventListener 的第三个参数设为 true（捕获模式）时，事件先从外往内传，此时不会“冒泡”上去，但后续仍可能进入冒泡阶段，除非被中途阻止

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南