キャプチャーフェーズ　バブリングフェーズ

<div>
  <p style="margin: 1em">色は匂へど　<span>散りぬるを</span></p>
</div>

const Div = document.querySelector("div");
const Para = document.querySelector("p");
const Span = document.querySelector("span");

Div.addEventListener(
"click",
function () {
  console.log("Divが押されました。");
},
true  // true → キャプチャーフェーズ
// デフォルト(false) → バブリングフェーズ
);

Para.addEventListener("click", (e) => {
  e.stopPropagation(); // バブリングを止める
console.log("Paraが押されました。");
});

Span.addEventListener("click", (e) => {
  e.stopPropagation(); // バブリングを止める
console.log("Spanが押されました。");
});

イベントバブリング：　イベントが親へと伝わっていく流れのこと
preventDefault：　a(リンク先に移動)、submit等のデフォルトアクションを中止する
stopPropagation：　イベントフローを中断する
イベントキャプチャリング：　イベントバブリングの前に、親要素から子要素に向けてイベントが伝わる
addEventListenerの3つめの引数：　そのイベントリスナ（関数）をイベントキャプチャリングで処理するならtrue、イベントバブリングで処理するならfalse

addEventListenerに第三引数を設定することができる
const option = {  
　　// once: true, // リスナーの呼び出しを１回のみにする
　　capture: true, //キャプチャーフェーズで取得する
　　};
btn.addEventListener(“click”, fnc, option);

[ イベントフロー ]
イベントが発生
　　↓
キャプチャリングフェーズ(親から子へイベントを見ていく)
　　↓
ターゲットフェーズ(発生源の要素の処理)
　　↓
バブリングフェーズ(発生源から親へイベントを見ていく)