dom_dom0500_010

次のコードでイベントが親要素まで伝播する順番はどれですか？

[ javascript ]

// div > p の構造
div.addEventListener("click", () => console.log("div"));
p.addEventListener("click", () => console.log("p"));
  1. div → p
  2. p → div
  3. 同時に発火
  4. 実行されない
正解
  1. p → div
解説

デフォルトはバブリングフェーズで発火するため、まずp（子要素）が実行され、その後に親のdivが実行されます。

使用例（サンプルコード）

[ javascript ]

const div = document.getElementById("div");
const p = document.getElementById("p");

div.addEventListener("click", () => console.log("div"));
p.addEventListener("click", () => console.log("p"));