JavaScriptにおけるイベントの伝播

イベントのバブリングの他に、イベントのキャプチャ（伝播）もあります。実際には、イベントはまず上から下へ（キャプチャ段階）進み、ターゲット要素に到達し（ターゲット段階）、その後初めてバブリングを開始します（バブリング段階）。

キャプチャ段階でイベントハンドラを登録するには、 addEventListenerの第3引数（オプション）を使用します。これがtrueの場合、イベントはキャプチャ段階で発火し、falseの場合はバブリング段階で発火します（これがデフォルトです）。例を見てみましょう：

elem1.addEventListener('click', function() {
	console.log('緑 - キャプチャ');
}, true);
elem1.addEventListener('click', function() {
	console.log('緑 - バブリング');
}, false);

elem2.addEventListener('click', function() {
	console.log('青 - キャプチャ');
}, true);
elem2.addEventListener('click', function() {
	console.log('青 - バブリング');
}, false);

elem3.addEventListener('click', function() {
	console.log('赤 - キャプチャ');
}, true);
elem3.addEventListener('click', function() {
	console.log('赤 - バブリング');
}, false);

確認してみてください：