Mastering Event Bubbling, Capturing & Delegation — The Ultimate Frontend Interview Guide
Priyen Mehta | Senior Full-Stack Developer
Have you ever clicked a button inside a div and wondered why the parent div’s event also fired?
That, my friend, is event propagation — one of the most asked (and most misunderstood) concepts in JavaScript interviews.
Let’s break down Event Bubbling, Capturing, and Delegation with clear examples, visuals, and tips to ace your next frontend interview.
1. What is Event Propagation?
When an event (like click) happens on an element, the browser doesn’t just handle it there.
Instead, the event travels through three phases:
- Capturing phase → From the top (document) down to the target
- Target phase → The event reaches the element you actually clicked
- Bubbling phase → The event bubbles up from target back to the root
So, when you click a button inside nested divs, the event flows like this:
document → body → div → button
↓
document ← body ← div ← button
Example: Bubbling in Action
Output when you click the button:
Child clicked
Parent clicked
The child’s event runs first, then the parent’s — that’s bubbling.
Interview Tip
Default event listeners in JavaScript use bubbling phase.
But you can listen in the capturing phase by passing a third argument true:
element.addEventListener(‘click’, handler, true);
Now, the event is caught on the way down, before the target is reached.
2. Event Capturing in Example
Output:
Outer capturing
Inner clicked
Capturing happens before the target receives the event.
3. Event Delegation — The Smart Way to Handle Events
Instead of adding 100 listeners to 100 buttons, you can add one listener to their parent and let event bubbling do the work.
- Apple
- Banana
- Cherry
Now, even if you dynamically add new <li> elements, they’ll still work — no extra listeners needed.
This is event delegation — efficient, scalable, and clean.
Why Interviewers Love This Question
Because it tests:
- Your understanding of how the DOM event model works
- Your ability to optimize event listeners
- Your problem-solving mindset for dynamic UIs
Common follow-up questions:
- What’s the difference between
event.targetandevent.currentTarget? - How do you stop event bubbling?
event.stopPropagation();
- How to prevent default browser behavior?
event.preventDefault();
Quick Summary
Let’s wrap it up with a simple mental model you can always recall:
Capturing Phase:
Think of it as the event traveling from the top of the DOM down to the element you clicked.
You can listen during this phase by passingtrueas the third argument inaddEventListener.
Target Phase:
This is the actual element that was clicked — the event has reached its destination.
Bubbling Phase:
After the target handles it, the event bubbles back up through the ancestors (child → parent → document).
This is the default phase when you attach listeners without specifying anything.- Event Delegation:
Instead of attaching a bunch of listeners to every child, attach one listener to the parent and let bubbling handle it.
This makes your code more efficient and scalable.
Final Thoughts
Understanding event propagation isn’t just about writing cleaner code — it’s about thinking like the browser.
Next time you’re debugging “Why did this event fire twice?”, you’ll know exactly which phase is to blame 
If you found this helpful, clap 
and follow me for more Frontend Interview Guides!
A message from our Founder
Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. 
If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.
And before you go, don’t forget to clap and follow the writer️!
Published in JavaScript in Plain English
New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.
Written by Priyen Mehta | Senior Full-Stack Developer
Experienced Senior Software Engineer with 5+ years of hands-on expertise in building scalable, responsive web applications and robust backend systems.