HTML DOM：哪些事件不会冒泡？

Question

大多数事件在所有浏览器中都会冒泡。然而，我知道在Internet Explorer中 "submit" 事件不会冒泡。还有哪些事件不会冒泡？

- jeremysawesome

Answer 1

HTML 框架/对象

• load - 载入事件
• unload - 卸载事件
• scroll（除非在文档上的滚动事件会冒泡到窗口）- 滚动事件

HTML 表单

• focus - 获取焦点事件
• blur - 失去焦点事件

变异

• DOMNodeRemovedFromDocument - 节点从文档中移除事件
• DOMNodeInsertedIntoDocument - 节点插入文档事件

进度

• loadstart - 开始载入事件
• progress - 进度事件
• error - 错误事件
• abort - 取消事件
• load - 载入事件
• loadend - 载入结束事件

来源: https://en.wikipedia.org/wiki/DOM_events#Events

---

为了检查一个事件是否通过DOM树向上冒泡，您应该检查 事件对象和其实例上可用的只读bubbles属性 。

"bubbles只读属性指示事件是否通过DOM树向上冒泡。"

在以下代码示例中，您可以检查“focus”事件只能在DOM层次结构较高（document.body）的事件侦听器中的捕获阶段期间跟踪，而不能在冒泡阶段跟踪。另一方面，点击事件可以在两个方向（捕获+冒泡阶段）中捕获。

// Check if the click event bubbles:
document.querySelector("input").addEventListener("click", e =>{
  console.log(`Does the ${e.type} event bubble?`, e.bubbles);
}, { once: true });
// Check if the focus event bubbles:
document.querySelector("input").addEventListener("focus", e =>{
  console.log(`Does the ${e.type} event bubble?`, e.bubbles);
}, { once: true });

// Track focus event during the bubbling phase (at least trying to):
document.body.addEventListener("focus", e =>{
  console.log(`Tracking ${e.type} event during bubbling phase.`);
});

// Track focus event during the capturing phase:
document.body.addEventListener("focus", e =>{
  console.log(`Tracking ${e.type} event during capturing phase.`);
}, { capture: true })

// Track click event during the bubbling phase:
document.body.addEventListener("click", e =>{
  console.log(`Tracking ${e.type} event during bubbling phase.`);
});

// Track click event during the capturing phase:
document.body.addEventListener("click", e =>{
  console.log(`Tracking ${e.type} event during capturing phase.`);
}, { capture: true })

<input placeholder="Focus or click...">

- Gajus

Answer 2

任何特定于一个元素的事件都不会冒泡：focus、blur、load、unload、change、reset、scroll、大多数DOM事件（DOMFocusIn、DOMFocusOut、DOMNodeRemoved等）、mouseenter、mouseleave等。

- user578895

---

在要求列出明确列表的答案中加入“等等”似乎有些靠不住，"mouseenter, mouseleave, etc."是什么意思？mouseover是否包括在内？此外，你能为这个信息提供引用吗？ - Phrogz

+1 给 @Phrogz。值得一提的是，我们从这里学到，mouseenter 事件与 mouseover 事件类似，但不同之处在于它不会冒泡，并且当指针从其后代的物理空间移动到自己的物理空间时，不会触发该事件。 - Beetroot-Beetroot

这个回答是无意义的。所有事件都特定于一个元素。我错了吗？请举出任何不是这样的例子。 - doug65536

@doug65536-- 首先，请不要在2.5年前的帖子上发表对抗性评论。其次，不，你错了。像“点击”这样的东西在概念上与屏幕区域相关联，但在实践中与DOM树相关联。这就是冒泡的整个_意义_，你可以在更高的节点上捕获事件。如果你点击一个文本块，你也会点击它上面的20个节点。如果你聚焦到一个输入框，你只是聚焦到那个一个元素，或者离开那个一个元素，或者改变那个一个元素等等。 - user578895

这里列出的许多事件都已经存在了很长一段时间，以至于我能记得，因此这个答案显然是不准确的。即使是稍微搜索一下也可以证实这一点；例如，以下事件确实会冒泡，尽管答案中声称不会：mouseenter、mouseleave、submit。 - Zenexer

Answer 3

我无法列出所有不冒泡的事件。但我找到了一个很好的网站，可以帮助您检查事件是否会冒泡。 @MDN event.bubbles

- ace

---

MDN的事件列表的新链接。无法编辑帖子，因此进行评论。 - Murali KG

Answer 4

除了其他的回答外，文档元素上的"load"事件会冒泡，但只冒泡到文档对象，不会继续传播到窗口对象。只有整个文档加载完毕后，窗口对象上的"load"事件才会被触发。

- koninos

Answer 5

焦点事件和失去焦点事件不会冒泡

- kennebec