javascript - HTML DOM : Which events do not bubble?

Question

大多数事件在所有浏览器中冒泡。但是，我知道在 Internet Explorer 中“提交”事件不会冒泡。还有哪些不冒泡的事件？

Answer 1

HTML 框架/对象

• 加载
• 卸载
• 滚动(除了文档上的滚动事件必须冒泡到窗口)

HTML 表单

• 专注
• 模糊

突变

• DOMNodeRemovedFromDocument
• DOMNodeInsertedIntoDocument

进度

• 加载开始
• 进度
• 错误
• 中止
• 加载
• loadend

发件人:https://en.wikipedia.org/wiki/DOM_events#Events

---

为了检查事件是否通过 DOM 树向上冒泡，您应该检查 read-only bubbles Event 对象及其实例上可用的属性。

"The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not."

在下面的代码示例中，您可以检查“focus”事件如何只能在 capturing phase 期间从 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...">