EventTarget.addEventListener() - Web API | MDN
addEventListenerの第3引数でuseCaptureを指定することができます。
useCaptureがfalse
簡単にいえば子要素からイベントが発火します。
useCaptureがtrue
簡単にいえば親要素からイベントが発火します。
挙動の原因
と、キャプチャフェーズで親から対象まで辿っていき、バブリングフェーズで対象から親まで戻っていくことが原因となります。
useCapture が true のイベントは行き（キャプチャフェーズ）で発火し、false の要素は帰り（バブリングフェーズ）で発火するわけです。
