Event Bubbling: Practical Use Cases
How event bubbling is used in real applications.
Event Bubbling: Practical Use Cases
1. Event Delegation
The most common use of bubbling. Put one listener on a parent instead of many on children:
document.querySelector("#list").addEventListener("click", (e) => { if (e.target.tagName === "LI") console.log(e.target.textContent); });
2. Modal Close on Overlay
overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });
3. Stopping Unwanted Propagation
button.addEventListener("click", (e) => { e.stopPropagation(); doSomething(); });
4. Event Intercepting (Capturing)
document.addEventListener("click", (e) => { if (e.target.matches(".tracked")) logClick(e.target); }, true);
The Takeaway
Practical uses of bubbling: event delegation (one listener on parent), modal close on overlay click, stopping unwanted propagation (stopPropagation), and event intercepting (capturing phase for global tracking). Bubbling is the foundation of event delegation.
Event delegation. Instead of adding a listener to each child, add one listener to the parent. When a child is clicked, the event bubbles to the parent, which checks e.target to determine which child was clicked.
Add a click listener on the overlay. Check if e.target === overlay (the click was on the overlay, not the modal). If so, close the modal. The modal's clicks bubble to the overlay but e.target is the modal, not the overlay.
Call e.stopPropagation() in the event handler. This prevents the event from propagating to parent elements. Use it when you do not want parent handlers to fire.
document.addEventListener('click', (e) => { /* log or intercept */ }, true). The true flag listens in the capturing phase, so the handler runs before any target handler.
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 (the child), but e.currentTarget changes (the current element in the bubble chain).
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.