HTML frame/object
loadunloadscroll(except that a scroll event on document must bubble to the window)
HTML form
focusblur
Mutation
DOMNodeRemovedFromDocumentDOMNodeInsertedIntoDocument
Progress
loadstartprogresserrorabortloadloadend
From: https://en.wikipedia.org/wiki/DOM_events#Events
In order to check whether an event bubbles up through the DOM tree or not, you should check the read-only bubbles property available on the Event object and its instances.
“The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not.”
In the following code example, you can check how the ‘focus’ event can only be tracked during the capturing phase from an event listener attached high in the DOM hierarchy (document.body) but not during the bubbling phase. The click event on the other hand, can be captured in both directions (capturing + bubbling phases).
// 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...">