🔰bubbling phase

JS ⟩ browser ⟩ events ⟩ custom ⟩ bubbling

most events bubble up to the Document object, and then to the Window object, notable exceptions are the “focus” “blur,” and “scroll” events.
a handler can stop the event from bubbling by calling event.stopPropagation().

The “load” event on document elements bubbles, but it stops bubbling at the Document object and does not propagate on to the Window object.

<h1 id="h1">Hello from the script!</h1>

<script>
  // catch on document
  document.addEventListener("hello", function(e) {
    console.log("Hello from " + e.target.tagName); // Hello from H1
  });

  // ⭐️ bubbling event
  let event = new Event("hello", {bubbles: true}); 
  
  // dispatch on h1
  h1.dispatchEvent(event);
</script>

Previousevent propagation Nextcapturing phase

Last updated 2 years ago

Was this helpful?