JavaScriptにおけるイベントバブリング

以下のように、互いに入れ子になった複数のブロックがあると想像してみてください:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

変数にdiv要素への参照を取得します:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

次に、これらにクリックイベントハンドラを設定します:

elem1.addEventListener('click', function() {
	alert('緑');
});
elem2.addEventListener('click', function() {
	alert('青');
});
elem3.addEventListener('click', function() {
	alert('赤');
});

少しCSSを追加して、ブロックを画面に表示してみましょう:

最も内側の赤いブロックをクリックしてみてください。すると、イベントがまず赤いブロックで発生し、次に青いブロック、そして緑のブロックで発生するのがわかります。これは理にかなっています。なぜなら、内側のブロックをクリックすると、同時にすべての外側のブロックもクリックしていることになるからです。

つまり、最も内側のブロックをクリックすると、クリックイベントはまずそのブロックで発生し、その後その親要素、親要素の親要素へと伝播し、最上位に到達するまで続きます。

この動作は、イベントのバブリング (bubbling) と呼ばれます。これは、底から泡が浮かび上がる様子になぞらえています。泡のように、イベントも上へと浮かび上がり、より上位のブロックで毎回発生しているように見えます。

イベントバブリングを実証するコードを自分で書いてみてください。様々なタイプのイベントでバブリングをテストしてください。

すべてのイベントがバブリングするわけではありません。実験的に、バブリングしないイベントを少なくとも1つ見つけてみてください。