The Difference Between Capturing and Bubbling Phase in JavaScript

Event bubbling and capturing are two ways events can be handled in the HTML DOM API. When an event occurs in an element and its parent also registers a handle for the same event, the event propagation model will determine which element should receive the event first.

By default, addEventListener uses bubbling — here the event is first captured in the innermost element and propagates to outer elements:

const ul = document.getElementById('parent');
const li = document.getElementById('child');

// Because of event bubbling, this will return “👶, 👨”
ul.addEventListener('click', () => console.log('👨'));
li.addEventListener('click', () => console.log('👶'));

While in the capturing phase, the opposite happens. The event is captured in the outermost element first and propagates to inner elements:

// Because of event capturing, this will return “👨, 👶”
ul.addEventListener('click', () => console.log('👨'), true);
li.addEventListener('click', () => console.log('👶'), true);

As you can see, you can change the even propagation mode for addEventListener, by setting the second parameter (useCapture) to true.

You can check out the differences at the following pen, change the flag to use bubbling instead of capturing:

50 JavaScript Interview QuestionsAnd their answers explainedHere are 50 JavaScript interview questions that often come up during a technical interview. In one place, one resource to learn from.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Docs for EventTarget.addEventListener
• MDN - Introduction to events