When should you use stopPropagation in JavaScript?
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.
Verify This Answer
Cross-check this information using these trusted sources:
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