The answer
To intercept events before they reach the target. For example, logging all clicks before any handler processes them, or implementing a global event interceptor. Most use cases use the default bubbling phase.
Event Bubbling and Capturing Explained
Why would you use the capturing phase?
More FAQs in Event Bubbling and Capturing Explained
Bubbling propagates from the target up to the document (bottom-up). Capturing propagates from the document down to the target (top-down). Default listeners run in the bubbling phase.
Capturing handlers fire first (outer to inner), then the target's handlers, then bubbling handlers (inner to outer). For example: form capturing, div capturing, button, div bubbling, form bubbling.
Pass true as the third argument to addEventListener: element.addEventListener('click', handler, true). This listens in the capturing (top-down) phase instead of the default bubbling (bottom-up) phase.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.