Event target and currentTarget

EventオブジェクトにはcurrentTargetとtargetの2つのプロパティがあるけど、いつもどっちがどっちか混同する。

currentTargetの方はaddEventListenerでリッスンしている要素が入る。たとえば以下のようなHTMLとJavaScriptがあるとして、

1	<body><a href="./foobar" id="foobar">Link</a></body>

1
2
3

document.body.addEventListener("click", ev => {
  console.log(ev.currentTarget, ev.target);
});

currentTargetにはaddEventListenerをしているbody要素が入ってくる。targetには実際にクリックイベントが発生したa要素が入ってくる。

以下のように、クリックイベントが発生するa要素自体でaddEventListenerするとする。

1
2
3

document.getElementById("foobar").addEventListener("click", ev => {
  console.log(ev.currentTarget, ev.target);
});

この場合は、currentTargetもa要素になるし、targetもa要素になる。たいていの場合はこのようにするから、どちらも同じ要素が入ってくる。

どちらでも同じだからcurrentTargetでもtargetでもどちらを使っても良い。だから混同してしまう。

そういう時は、addEventListenerしている要素を操作したいのか、イベントが発生してる要素自体を操作したいのか、実装の意図を考えて決めるべきなんだと思う。けど、まあでも、どちらでも動くからどちらでも良いよね！とも思う。

currentTargetとtargetの区別がどんな場合に有効に機能するかというと、

<ul id="parent">
  <li><a href="./foo" id="foo">Link</a></li>
  <li><a href="./bar" id="bar">Link</a></li>
</ul>

1
2
3

document.getElementById("parent").addEventListener("click", ev => {
  console.log(ev.currentTarget, ev.target);
});

以上のように複数のリンクのイベントを親の要素でまとめてリッスンしたい場合とかに有効に機能する。currentTargetの方にはparentの要素が入ってくるが、targetの方には実際にクリックイベントが発生したa要素が入ってくる。

というメモ。