事件冒泡是指事件从目标元素逐级向上传播至document的过程；可通过stopPropagation()阻止冒泡，preventDefault()阻止默认行为，二者作用不同且可共存。
JavaScript 事件冒泡是指当一个元素上的事件被触发时，该事件会从目标元素逐级向上传播到其父元素，直到 document 根节点的过程。这是事件流的默认行为之一（另一个是捕获阶段，但冒泡更常用、更直观）。
事件冒泡是怎么发生的
比如你点击一个按钮，而这个按钮在 div 里，div 又在 body 里。点击后，事件会先在按钮上触发，然后“冒泡”到 div，再冒泡到 body，最后到 document。每个中间容器如果绑定了同类型的事件监听器（如 click），都会依次执行。
这本身不是 bug，而是设计机制，方便用事件委托（比如给 ul 绑定 click，通过 event.target 判断点的是哪个 li）。
如何阻止事件冒泡
调用事件对象的 stopPropagation() 方法即可中断向上传播：
立即学习“Java免费学习笔记（深入）”；
- 只影响当前事件监听器之后的冒泡路径，不影响同一元素上其他监听器的执行
- 写在事件处理函数内部，例如：e.stopPropagation();
- 注意：IE8 及更早版本用 e.cancelBubble = true; 兼容（现代开发一般不需考虑）
如何阻止默认行为
很多 HTML 元素有自带行为，比如点击 a 标签会跳转、提交表单会刷新页面、按空格键在 checkbox 上会切换选中状态。这些是“默认行为”，可通过 preventDefault() 阻止：
- 写法示例：e.preventDefault();
- 它和冒泡无关，只管是否执行浏览器原本要做的事
- 对没有默认行为的元素（如 div）调用它无效果
stopPropagation 和 preventDefault 的区别
这两个方法常被混淆，但作用完全不同：
- stopPropagation() → 管“传不传”：阻止事件继续往父级冒泡
- preventDefault() → 管“做不做”：阻止浏览器执行该事件对应的默认动作
- 两者可同时使用，互不影响。例如：点击链接既不跳转，也不触发父 div 的 click 监听器
