What is the difference between e.target and e.currentTarget in event bubbling?
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).
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Event Bubbling: Practical Use Cases
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.
Still have questions?
Browse all our FAQs or reach out to our support team