JavaScript の target と currentTarget の違い

例えば、addEventListener() で特定の要素がクリックされたとき、コールバック内でその要素を取得したい場合、 currentTarget もしくは target プロパティを使える。

注意点として、target はクリックされた要素を返すが、必ずしもその要素がイベントリスナーにアタッチされているとは限らない。

例えば、次のようなボタンがあったとする。

<button>
  Hello <span>world!</span>
</button>

そして、次のようにイベントリスナーを定義する。

const button = document.querySelector('button');
 
button.addEventListener('click', (e) => {
  console.log(e.target);
  console.log(e.currentTarget);
})

ここで e.target は、 <button> 要素もしくは <span> 要素を返す可能性がある。どちらが返されるかはユーザーが実際にクリックした場所による。

一方、 e.currentTarget は、イベントリスナーにアタッチされている要素を返すので、ユーザーがボタンのどこをクリックしようが、常に <button> を返す。

参考

• Event: currentTarget property - Web APIs | MDN
• Event: target property - Web APIs | MDN