DOM - Event Propagation (known as Event Bubbling)


event propagation is a mechanism in which an event is propagated to all its ascendant (ancestore).


Example with the click event

  • The html with:
    • the link to click in order to create a click event
    • a div as parent to demonstrate that this element receives also the click event.
    <a href="#">Bubbles demo - click me</a>
  • The javascript that select the anchor, and attach a function when it's clicked.
document.querySelector('a').onclick = function(event) {
   console.log("The link was clicked");
   console.log('Does the onClick event bubbles ? '+event.bubbles);
document.querySelector('div').onclick = function(event) {
   console.log("The div was clicked showing that the event bubbles up");



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


  • stopImmediatePropagation() to not call any further listeners for the same event at the same level in the DOM

Powered by ComboStrap