focus、blur、mouseenter、mouseleave、load、error、scroll、resize 默认不冒泡:焦点事件因语义专属需用 focusin/focusout;鼠标悬停事件为精准触发而禁用冒泡;资源与视图事件因作用域严格或性能考量均不支持冒泡。

JavaScript中,focus、blur、mouseenter、mouseleave、load、error、scroll、resize 这些事件默认不冒泡。
焦点类事件:focus 和 blur
它们只在获得或失去焦点的元素上触发,不会向父级传播。比如给 input 绑定 focus 事件,它的父 div 无法通过冒泡监听到——因为焦点状态是元素专属的,冒泡既无语义也易引发混乱。
- 替代方案:用 focusin 和 focusout,这两个是官方提供的冒泡版,行为一致但支持事件委托
- 注意:focusin/focusout 虽然冒泡,但不能和 focus/blur 混用在同一元素上做逻辑判断,容易重复触发
鼠标进入/离开类事件:mouseenter 和 mouseleave
它们专为“真正进入/离开元素可视区域”设计,内部子元素切换不会触发,天然不冒泡。与之对比,mouseover/mouseout 会冒泡,且在子元素间移动时频繁触发。
- 典型用途:下拉菜单显示/隐藏、悬停提示层控制
- 不能靠父元素监听 mouseenter 来响应子项悬停,必须直接绑定在目标元素上
资源与状态类事件:load、error、abort、unload
这些事件关联具体资源(如 img、script、video)或页面生命周期,作用域严格限定在目标节点。例如 img 加载失败触发 error,父容器不需要、也不应该收到该信号。
立即学习“Java免费学习笔记(深入)”;
- load 只在资源加载完成时触发一次,且仅限该元素;window 上的 load 是特例,它本身是全局事件,不是冒泡来的
- error 也不会冒泡,所以
<img onerror="handle()>必须写在 img 标签上,或用捕获方式监听
视图与滚动类事件:scroll 和 resize
scroll 在任意可滚动元素上触发,但不会向上冒泡;resize 同样只作用于被调整尺寸的元素(包括 window)。它们不冒泡主要是为了性能——滚动和缩放非常高频,若逐层冒泡会显著拖慢渲染。
- 想在父容器监听子元素滚动?只能用 捕获阶段:addEventListener('scroll', handler, true)
- window.resize 不依赖冒泡,直接监听 window 即可;但自定义元素的 resize 需借助 ResizeObserver,原生 resize 事件不适用于普通 DOM 元素


















