What is event bubbling and capturing in JavaScript?

Photo by Mantissa on Unsplash

Event bubbling

Event bubbling is a mechanism in JavaScript where an event propagates from the innermost element (i.e., the element that the event originated from) outwards to the outer elements. This means that if an event is triggered on a child element, it will also trigger on its parent elements, all the way up to the document root. This allows for event listeners to be attached to parent elements, rather than having to attach them to every individual child element. It is the opposite of event capturing.

Here’s an example of event bubbling in JavaScript:

<div id="container">
  <button id="button">Click me!</button>
</div>

var container = document.getElementById("container");
var button = document.getElementById("button");

container.addEventListener("click", function() {
  console.log("Container clicked!");
});

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

In this example, we have a div element with an id of "container" that contains a button element with an id of "button". We attach a click event listener to both the container and the button.

If a user clicks on the button, both event listeners will be triggered. First, the event listener on the button will be called and “Button clicked!” will be logged to the console. Then, the event listener on the container will be called, and “Container clicked!” will be logged to the console. This is because the event is propagating from the innermost element (the button) outwards to the outer elements (the container).

It is worth noting that the order of the logs will depend on the type of event. Event bubbling follow the order of DOM tree. Event that is closest to the root is bubbled first and the last one is the event that is closest to the leaf.

Event capturing

Event capturing is the opposite of event bubbling in JavaScript. Instead of propagating from the innermost element outwards to the outer elements, event capturing propagates from the outermost elements inwards to the innermost element. This means that if an event is triggered on a child element, it will first trigger on its parent elements, all the way up to the document root, before triggering on the child element itself.

Here’s an example of event capturing in JavaScript:

<div id="container">
  <button id="button">Click me!</button>
</div>

var container = document.getElementById("container");
var button = document.getElementById("button");

container.addEventListener("click", function() {
  console.log("Container clicked!");
}, true); //passing true as the third argument to addEventListener() activates event capturing

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

In this example, we’re using the same HTML. The difference is that the container's event listener is passed with a third argument of true.

If a user clicks on the button, both event listeners will be triggered. First, the event listener on the container will be called and “Container clicked!” will be logged to the console. Then, the event listener on the button will be called, and “Button clicked!” will be logged to the console. This is because the event is propagating from the outermost element (the container) inwards to the innermost element (the button) .

Capturing can be useful if you want to handle the event before it reaches the element that it was triggered on, but it is less frequently used than bubbling.