Event Bubbling: Complete Guide for Interviews
Everything you need to know about event bubbling for interviews.
Event Bubbling: Complete Guide for Interviews
What to Know
- Definition: events propagate from target up to document.
- Three phases: capturing (down), target, bubbling (up).
- Default: listeners run in the bubbling phase.
- stopPropagation: stops bubbling to parents.
- stopImmediatePropagation: stops bubbling AND same-element listeners.
- Capturing: addEventListener(type, handler, true).
- Event delegation: one listener on parent using bubbling.
- e.target vs e.currentTarget: clicked element vs listener element.
Practice Questions
- Predict the output of nested elements with listeners.
- Explain when to use stopPropagation.
- Implement event delegation for a list.
- Explain the three phases of event propagation.
- Explain the difference between e.target and e.currentTarget.
The Takeaway
For interviews: know the definition (bottom-up propagation), three phases (capturing, target, bubbling), stopPropagation vs stopImmediatePropagation, capturing (third arg true), event delegation (one parent listener), and e.target vs e.currentTarget. Practice output prediction and delegation implementation.
Definition (bottom-up propagation), three phases (capturing, target, bubbling), default is bubbling, stopPropagation vs stopImmediatePropagation, capturing (third arg true), event delegation, and e.target vs e.currentTarget.
Add one listener on the parent: parent.addEventListener('click', e => { if (e.target.matches('li')) handle(e.target); }). Check e.target to determine which child was clicked. Works for dynamically added children.
Capturing (top-down: document to target's parent), Target (event reaches the target), Bubbling (bottom-up: target to document). Default listeners run in the bubbling phase.
e.target is the element that triggered the event (the actual clicked element). e.currentTarget is the element the listener is registered on. In bubbling, e.target stays the same, e.currentTarget changes as the event bubbles.
When you want to prevent parent handlers from firing after the child's handler. For example, a button click inside a modal should not trigger the modal's overlay click handler. Do not overuse it, as it breaks event delegation.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.