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 })