事件传播分捕获(外→内)和冒泡(内→外)两阶段;stopPropagation()中断传播路径,preventDefault()取消默认行为,二者功能独立。

事件冒泡和捕获是 JavaScript 中事件传播的两个阶段,理解它们的关键在于知道事件在 DOM 树中“怎么走”——是从外向内,还是从内向外。阻止事件传播就是在这条路径上按一下暂停键,让后续阶段不执行。
事件捕获:从外到内的预热阶段
当用户触发一个事件(比如点击按钮),浏览器会先从 最外层的祖先元素(如 document)开始,一层层向下检查,直到目标元素。这个由外向内的过程叫捕获阶段。默认情况下,我们绑定的事件监听器不会在这个阶段触发,除非显式开启。
- 用 addEventListener 的第三个参数设为 true 可以让监听器在捕获阶段响应
- 例如:
btn.addEventListener('click', handler, true) - 捕获常用于在父级提前拦截或统一处理事件(如权限校验、日志记录)
事件冒泡:从内到外的默认路径
到达目标元素后,事件会“反弹”回去,从目标元素向上逐级通知父元素,直到 document。这就是冒泡阶段。它才是日常开发中最常打交道的部分。
- 像
onclick和addEventListener('click', handler)(不传第三个参数)都只在冒泡阶段触发 - 利用冒泡可以实现事件委托:给父容器绑定一次监听,靠
event.target区分具体点击了哪个子元素 - 注意表单元素(如
)的某些事件(如 focus、blur)不冒泡
怎样阻止事件继续传播
调用 event.stopPropagation() 可以立即中断当前事件在 DOM 树中的传播路径,无论它正处于捕获还是冒泡阶段。
立即学习“Java免费学习笔记(深入)”;
- 它只阻止“后续节点”的触发,不影响当前节点上其他同阶段监听器的执行
- 如果想连当前节点上的其他监听器也跳过,要用 event.stopImmediatePropagation()
- 注意:
return false在 jQuery 里等价于 stopPropagation + preventDefault,但在原生 JS 中只是函数返回值,不会阻止传播
顺便说下 preventDefault:别搞混了
event.preventDefault() 和阻止传播无关,它只用来取消事件的默认行为(比如点击链接跳转、表单提交、右键弹菜单)。你可以只阻止默认行为,但允许冒泡;也可以只阻止冒泡,但保留默认行为。
- 例如阻止链接跳转但允许父级监听 click:
event.preventDefault() - 例如阻止冒泡但不干扰表单提交:
event.stopPropagation() - 两者常一起用,比如自定义右键菜单时:
event.preventDefault(); event.stopPropagation();










