JavaScript中事件冒泡是什么_如何阻止事件传播

事件冒泡是JavaScript中事件从目标元素逐级向上传播至document的默认行为，如点击嵌套按钮时按按钮→p→section→body→html→document顺序触发；可用event.stopPropagation()阻止冒泡，但不影响同元素其他监听器执行。

事件冒泡是 JavaScript 中事件传播的默认行为：当一个元素上的事件被触发时，该事件会先在目标元素上执行，然后逐级向上传播到它的父元素、祖父元素，直到 document 根节点。理解它，才能合理控制交互逻辑。

事件冒泡是怎么发生的

比如点击一个按钮（<button></button>），而这个按钮嵌套在 <p> 里，<code><p> 又在 <code><section></section> 里。点击按钮后，click 事件会按顺序触发：按钮 → p → section → body → html → document。这就是冒泡路径。

注意：不是所有事件都冒泡（如 focus、blur、mouseenter、mouseleave 默认不冒泡），但常用的 click、mousedown、keydown 等都支持冒泡。

如何阻止事件冒泡

用 event.stopPropagation() 方法可以立即中断当前事件的后续冒泡过程，只影响当前这次事件流，不影响其他事件或同一元素上的其他监听器。

立即学习“Java免费学习笔记（深入）”；

• 写法简单：event.stopPropagation() 放在事件处理函数里即可
• 兼容性好：现代浏览器和 IE9+ 都支持
• 注意：它不会阻止同一元素上其他监听器的执行（想阻止用 stopImmediatePropagation()）

还有哪些相关控制方法

除了阻止冒泡，还有两个常被混淆但用途不同的方法：

标签： 事件冒泡 事件传播 javascript java html 浏览器