dom_dom0500_003

イベント委譲では、親要素1箇所にリスナーを付けて if ( ( A ).matches(“.item”) ) { … } のように分岐する。( A ) には実際にイベントを発生させた要素を表すプロパティ、親側の要素を指すのは ( B ) である。

解答

A: event.target
B: event.currentTarget

解説

event.target は実際にクリックされた最深の要素。currentTarget は現在ハンドラが束ねられている要素（委譲元の親）を指す。

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

[ html ]

<ul id="list">
  <li class="item">A</li><li class="item">B</li>
</ul>
<script>
list.addEventListener("click", e => {
  if (e.target.matches(".item")) {
    console.log("クリックされたLI:", e.target.textContent);
    console.log("ハンドラ所有者:", e.currentTarget.id);
  }
});
</script>