JavaScript 中怎么理解事件冒泡机制的传递过程-js教程-PHP中文网

事件冒泡是事件从目标元素沿dom树向上逐级传播至document的过程，发生在目标阶段之后，遵循父子层级关系，可被stoppropagation()阻止，是事件委托的技术基础。

javascript 中怎么理解事件冒泡机制的传递过程

事件冒泡是 JavaScript 事件传播中默认发生的阶段，指事件从**最内层被点击（或触发）的元素开始**，沿着 DOM 树逐级向上传播到父元素、祖父元素，最终到达 document（有时包括 window）的过程。

冒泡的起点和路径很明确

它不是随机扩散，而是严格遵循 DOM 的父子层级关系：

触发点一定是事件的目标元素（即 e.target），比如你点的是一个 <button></button>，那冒泡就从这个 button 开始；
接着传给它的直接父元素（比如包裹 button 的 <div>）； <li>再传给父元素的父元素（比如 <code><section></section> 或）；
最后到达 document —— 这是冒泡的终点，不会继续到 window，除非显式监听在 window 上。

冒泡发生在“目标阶段之后”

根据 W3C 标准，一次完整点击包含三个阶段：

捕获阶段：事件从 document 向下传递，直到目标元素的父级（不触发目标自身）；
目标阶段：事件抵达目标元素，执行该元素上绑定的监听器；
冒泡阶段：事件从目标元素向上回传，依次触发各级父元素上的监听器（默认所有 addEventListener 都在此阶段运行）。

也就是说，冒泡不是“独立发生”，而是整个事件流中承上启下的环节——它紧接在目标触发之后，为父级统一响应子元素行为提供基础。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

冒泡可以被中途阻止

虽然冒泡是默认行为，但你可以用两个方法精准干预：

e.stopPropagation()：阻止事件继续向上冒泡，但不影响同一元素上其他同类型监听器执行；
e.stopImmediatePropagation()：不仅阻止冒泡，还立即终止当前元素上剩余未执行的同类型监听器。

注意：return false 在原生 JS 中不会阻止冒泡（仅在 jQuery 里有此效果），别混淆。

冒泡是事件委托的技术前提

正因为事件会冒泡，我们才能在父容器上监听子元素事件。例如：

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了列表项：', e.target.textContent);
  }
});

即使 <li> 是后来动态添加的，只要点击它，事件仍会冒泡到 #list，从而被统一捕获处理——这比给每个 <li> 单独绑定更轻量、更灵活。