The answer
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.
Event Bubbling and Capturing Explained
In what order do event handlers fire when using both capturing and bubbling?
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.
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.
Bubbling (bottom-up). The third argument to addEventListener defaults to false, which means the bubbling phase. Pass true for the capturing 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.