The answer
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.
Event Bubbling: Complete Guide for Interviews
When should you use stopPropagation in JavaScript?
More FAQs in Event Bubbling: Complete Guide for Interviews
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.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.