DOM - Event Propagation (known as Event Bubbling)

About

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

Example

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.
<div>
    <a href="#">Bubbles demo - click me</a>
</div>
  • The javascript that select the anchor, and attach a function when it's clicked.
document.querySelector('a').onclick = function(event) {
   event.preventDefault();
   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");
}

Management

see

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

stop

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

Powered by ComboStrap