Event Bubbling Common Mistakes
Common mistakes with event bubbling and how to fix them.
Event Bubbling Common Mistakes
Mistake 1: Not Using stopPropagation When Needed
Clicking a child triggers both the child's and parent's handlers.
Fix: e.stopPropagation() in the child's handler.
Mistake 2: Overusing stopPropagation
Stopping all bubbling prevents event delegation from working.
Fix: only stop when necessary. Let bubbling flow for delegation.
Mistake 3: Confusing e.target and e.currentTarget
e.target is the clicked element. e.currentTarget is the listener element.
Fix: use e.target for delegation (which child was clicked), e.currentTarget for the listener element.
Mistake 4: Not Checking e.target in Delegation
Handling all clicks on the parent, even clicks on non-child areas.
Fix: check e.target.tagName or e.target.matches() before handling.
The Takeaway
Mistakes: not using stopPropagation (parent fires too), overusing stopPropagation (delegation breaks), confusing e.target and e.currentTarget, and not checking e.target in delegation. Fix each with the appropriate technique.
Because of event bubbling. The click event propagates from the child up to the parent. To prevent this, call e.stopPropagation() in the child's handler.
Because it prevents event delegation from working. Delegation relies on events bubbling to a parent listener. If you stop propagation, the parent never receives the event. Only stop when necessary.
e.target is the element that triggered the event (the actual clicked element). e.currentTarget is the element the listener is registered on. In delegation, e.target is the child, e.currentTarget is the parent.
Because the parent listener receives all clicks within the parent, including clicks on non-child areas. Check e.target.tagName or e.target.matches() to ensure the click was on a relevant child before handling.
Yes. If a child calls stopPropagation, the event does not bubble to the parent, so the parent's delegation listener never fires. Only use stopPropagation when you explicitly want to prevent 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.