DOM - Event Propagation (known as Event Bubbling)


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

Event bubbles or propagates up the DOM tree: it starts with where the event happened, and then goes up the DOM tree.


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

Discover More
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
DOM - Event Delegation

Event delegation in the DOM
Devtool Chrome Event Listener
DOM - Event PreventDefault

If you don't want to have the default beahavior (such as following a link), you can prevent it with the event.preventDefault() function. It still allow the event propagation but disable the default action....
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Devtool Chrome Event Listener
Event - Dispatch (Starts Propagation / Bubble)

Dispatching an event means to follow the steps that propagate the event through the tree. Firing an event is just starting the propagation (dispatch) process. The HTML code. We will execute an event...
HTML - Label

The label html element represents a caption for a control item in a form (user interface). idfor A click on the label: will bring focus on the control element. propagates to the control element....
Devtool Chrome Event Listener
Javascript Event Targets (DOM)

An event has several target attached to them

Share this page:
Follow us:
Task Runner