DOM - Event Propagation (known as Event Bubbling)

1 - About

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

3 - 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");
}

4 - Management

4.1 - see

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

4.2 - stop

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

Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap