Event Delegation Best Practices
Best practices for using event delegation effectively.
Event Delegation Best Practices
1. Use closest() for Nested Clicks
list.addEventListener("click", (e) => { const item = e.target.closest(".item"); if (item) handle(item); });
2. Check e.target Before Handling
if (e.target.matches(".delete-btn")) { /* handle delete */ }
3. Use the Right Parent
Put the listener on the closest parent that contains all the children you want to handle.
4. Do Not Overuse stopPropagation
It breaks delegation. Only use it when necessary.
5. Be Aware of Non-Bubbling Events
Events like focus, blur, scroll (on elements), mouseenter, mouseleave do not bubble. Use capturing or focusin/focusout for delegation.
The Takeaway
Best practices: use closest() for nested clicks, check e.target before handling, choose the right parent, do not overuse stopPropagation, and be aware of non-bubbling events (use focusin/focusout instead of focus/blur for delegation).
Use closest() for nested clicks, check e.target before handling, choose the right parent (closest one containing all children), do not overuse stopPropagation (it breaks delegation), and be aware of non-bubbling events.
Use capturing phase (addEventListener with true) or use bubbling alternatives: focusin/focusout instead of focus/blur, mouseover/mouseout instead of mouseenter/mouseleave. These alternatives bubble and work with delegation.
Because stopPropagation prevents the event from bubbling to the parent, which breaks delegation. The parent listener never receives the event. Only use stopPropagation when you explicitly want to prevent delegation.
Choose the closest parent that contains all the children you want to handle. Too high (document) means unnecessary checks. Too low (a wrapper div) may not contain all children. The ideal is the direct parent (ul for li, table for tr).
focus and blur do not bubble, so they cannot be used with traditional event delegation. focusin and focusout are bubbling versions of focus and blur. Use focusin/focusout for event delegation with form fields.
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.