28. 不会冒泡的事件有哪些？

约 464 字大约 2 分钟

2025-09-26

在 JavaScript 中，大多数事件都会冒泡，但有一些特殊事件是不会冒泡的。以下是常见的不冒泡事件：

常见的不冒泡事件

焦点相关事件
- focus - 元素获得焦点
- blur - 元素失去焦点
- focusin - 会冒泡的 focus 事件
- focusout - 会冒泡的 blur 事件
鼠标进入/离开事件
- mouseenter - 鼠标进入元素
- mouseleave - 鼠标离开元素
加载和错误事件
- load - 资源加载完成
- unload - 文档卸载
- abort - 资源加载中止
- error - 资源加载错误
其他
- resize - 窗口或元素大小改变
- scroll - 元素滚动（但现代浏览器中有些会冒泡）

示例说明

<div id="parent">
  父元素
  <input id="child" type="text" value="子元素" />
</div>

<script>
  const parent = document.getElementById("parent");
  const child = document.getElementById("child");

  // focus 事件不会冒泡
  parent.addEventListener("focus", () => {
    console.log("父元素捕获到 focus 事件"); // 不会执行
  });

  child.addEventListener("focus", () => {
    console.log("子元素 focus 事件触发");
  });

  // mouseenter 事件不会冒泡
  parent.addEventListener("mouseenter", () => {
    console.log("父元素 mouseenter"); // 只在鼠标进入父元素时触发
  });

  child.addEventListener("mouseenter", () => {
    console.log("子元素 mouseenter"); // 不会触发父元素的监听器
  });
</script>

对应的冒泡版本

对于某些不冒泡的事件，有对应的冒泡版本：

不冒泡事件	冒泡版本
focus	focusin
blur	focusout
mouseenter	mouseover
mouseleave	mouseout

解决方案

如果需要让这些事件冒泡，可以使用：

使用冒泡版本的事件

// 使用 focusin 代替 focus
parent.addEventListener("focusin", (e) => {
  console.log("捕获到焦点事件:", e.target);
});

手动实现冒泡

child.addEventListener("focus", (e) => {
  // 创建自定义事件并手动冒泡
  const bubbleEvent = new CustomEvent("focusbubble", {
    bubbles: true,
    detail: { originalEvent: e },
  });
  e.target.dispatchEvent(bubbleEvent);
});

了解这些不冒泡的事件对于正确实现事件委托和避免事件处理错误非常重要。

更新日志

2025/9/27 17:16

查看所有更新日志

1eb9b-docs(Javascript): 更新Generator生成器函数文档内容于 2025/9/27