HTML DOM: Which events do not bubble?

by

HTML frame/object

  • load
  • unload
  • scroll (except that a scroll event on document must bubble to the window)

HTML form

  • focus
  • blur

Mutation

  • DOMNodeRemovedFromDocument
  • DOMNodeInsertedIntoDocument

Progress

  • loadstart
  • progress
  • error
  • abort
  • load
  • loadend

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...">

Leave a Comment

tech