Event Flow: Bubbling & Capturing

This is post #7 of Frontend Interview Questions series. If you're looking to level up your preparation or stay updated in general, consider joining Frontend Camp 💚.

---

Event bubbling and capturing, both are propagation mechanisms in DOM(Document Object Model). Both these mechanisms are opposite of each other.

Event Bubbling

In Event bubbling, the event, after triggering the handler on the target element(event.target) propagates upwards(bubbles) to the root element of the document. On its way it triggers all the event handlers on the parent elements.

/*
<div id="container">
  Hello world!
  <button id="btn">Click me</div>
</div>
*/

const container = document.getElementById('container');
container.addEventListener('click', function(event) {
  console.log('Container handler!');
});

const btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  console.log('Button handler!');
});

In the snippet above, when you click the button you'll see the following output in console:

"Button handler"
"Container handler"

First the handler on the button is called and the event.target property is set to button as it initiated the event. Event on its way up to the root element, it calls its parent's event handler.

Almost all events bubble but there are a few exceptions like focus event that do not bubble.

You can stop bubbling by calling the stopPropagation() method on the event. If the button's event handler in the above snippet stops propagation, the container's event handler won't be called.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

You can access the element that initiated the event by accessing target.event property. Also, the element whose handler is being executed can be accessed using event.currentTarget.

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

Want to learn more about the this keyword? I wrote a post on it.

Event Capturing

We've only been seeing half the picture until now. When the button in the above snippet is clicked, it isn't the first element to receive that event. 👀

The event flow consists of three phases:

1. Capturing phase: The event flows from the root element to the target element.
2. Target phase: The event is received on the target element.
3. Bubbling phase: The event starts propagating back to the root element.

By default, all event handlers are only called during target and bubbling phase. To call event handlers in the capturing phase, pass true as the third argument.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

If you are using a handler in capturing phase, it won't be called in the bubbling phase.

Similar to bubbling, when event.stopPropagation() is called during the capturing phase it won't let the event flow further i.e. down the DOM, in this case.

In the snippet we discussed earlier, if container stops propagation during capturing phase, the button's handler will never be called.

/*
<div id="container">
  Hello world!
  <button id="btn">Click me</div>
</div>
*/

const container = document.getElementById('container');
container.addEventListener('click', function(event) {
  console.log('Container handler!');
  event.stopPropagation();
}, true); // capturing phase

const btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  // this will never be logged
  console.log('Button handler!');
});

This is why you should always have a good reason to use event.stopPropagation(). It can lead to unexpected issues that are hard to debug in a complex or deeply nested DOM tree.

Event capturing is rarely used compared to Bubbling. Bubbling has a lot of use cases like "Event delegation" - an important performance pattern.

This post lays down the foundation for the next topic - Event delegation. Make sure you understand it well. Have doubts? Leave them in the comments. ✌️

---

Summary

1. Event flow consists of three phases: Capturing, Target and Bubbling phase.
2. In the capturing phase, event flows down from the root element to the target(event.target) element.
3. In the bubbling phase, event flows from the target element to the root element.
4. By default, all event handlers are called only during target and bubbling phase.
5. By passing a third argument in the addEventListener function, you can set the handler on the capturing phase.
6. At any point in the event flow, calling event.stopPropagation() will stop the event from flowing further.

---

Like what you just read? 👉 Consider joining the waitlist on Frontend Camp.

Leave some reactions "🦄" and comments so this post helps other devs like you. 🙏