The answer
Bubbling (bottom-up). The third argument to addEventListener defaults to false, which means the bubbling phase. Pass true for the capturing phase.
Event Bubbling and Capturing Explained
Which phase do event listeners run in by default?
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.