【補足】バブリングとキャプチャリングとは？

バブリングは、クリックなどのイベントが「子要素」から「親要素」へと伝播していく仕組みです。通常のイベントリスナーではこの動作が標準です。

キャプチャリングはその逆で、イベントが「親要素」から「子要素」に向かって先に伝わります。addEventListenerの第三引数にtrueを指定するとこの挙動になります。