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

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

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

javascriptelem1.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);

確認してみてください：