Event Bubbling

Let's dive deeper into event handling with another concept: Event Bubbling. Essential for understanding how events propagate through the DOM. It confused me early in my career, so I wanted to make sure you didn't suffer the same way I did.

What is Event Bubbling?

Event bubbling is when an event starts at the most specific element that triggered it and then bubbles up to the least specific ancestor element.

Let's imagine we have event listeners on our document, body, div, and button.

If we click the button, it will first call the button event (1), then the div event (2), then the body (3), and finally the document (4)

Real Example of Event Bubbling:

Take this code as an example. We have an event listener on the container and the button:

document.querySelector(".container").addEventListener("click", function () {
  this.style.backgroundColor = "#d4edda";
  console.log("Container clicked!");
  alert("Container clicked!");
});

document.querySelector(".button").addEventListener("click", function (event) {
  this.style.backgroundColor = "#f9c2c3";
  console.log("Button clicked!");
  alert("Button clicked!");
});

Here's the code.

Watch the order of the alerts. You'll first see the alert from the button before it bubbles up, and then we get the alert from the div with the container class.

Controlling Event Bubbling

Using the event.stopPropagation() method, you can control event bubbling.

This method stops the event from bubbling up to parent elements, ensuring that only the target element handles the event.

Let's use our previous example except add one line of code, which will stop the event on the div being called if we click the button. We will add event.stopPropagation() to the button event to achieve this:

document.querySelector(".container").addEventListener("click", function () {
  this.style.backgroundColor = "#d4edda";
  console.log("Container clicked!");
  alert("Container clicked!");
});

document.querySelector(".button").addEventListener("click", function (event) {
  this.style.backgroundColor = "#f9c2c3";
  console.log("Button clicked!");
  alert("Button clicked!");
  event.stopPropagation(); // Prevents the event from bubbling up
});

In the example, you'll now see that clicking the button will only log "Button clicked!" because event.stopPropagation() prevents the event from bubbling up to the container.

When to Use Event Bubbling

Event Bubbling is useful for having a single event handler for multiple child elements. For example, if you have a list of items and you want to perform the same action when any item is clicked, you can add a single event listener to the parent element.

General Rule of Thumb:

• Use event bubbling by default as it is more intuitive and commonly used.
• Use event.stopPropagation() to prevent the event from bubbling up to parent elements, ensuring that only the target element handles the event.

Learning about event bubbling and how to stop it will help you manage event handling and ensure that your web pages respond to user interactions in a controlled and expected manner.

In the next section, we will look at how to add decisions to your apps using conditional logic. It's another tool that will help you create much more dynamic applications.