event.currentTarget

イベントカレントターゲット（イベント）

意味リスナーの要素

event.currentTargetとは？

イベントリスナーがアタッチされている要素を参照します。

event.currentTargetの具体的な使い方

event.currentTargetとevent.targetの違い

<div id="outer">
  <button id="inner">クリックしてください</button>
</div>

<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

outer.addEventListener('click', function(e) {
  console.log('currentTarget:', e.currentTarget.id);
  console.log('target:', e.target.id);
});
</script>

外側の要素にイベントリスナーを設定し、内側の要素をクリックした時のcurrentTargetとtargetの違いを示します。currentTargetは常にリスナーが設定された要素（outer）を指し、targetは実際にクリックされた要素（inner）を指します。

event.currentTargetに関するよくある質問

Q. currentTargetとtargetの違いは？

A. currentTargetはイベントリスナーが登録された要素を指し、targetは実際にイベントが発生した要素を指します。ネストされた要素で違いが出ることがあります。

Q. イベントバブリングとの関係は？

A. イベントバブリングの過程で、currentTargetは変化しますが、targetは変化しません。currentTargetは現在のイベントハンドラが登録されている要素を常に指します。

event.currentTargetが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのevent.currentTargetやevent.cancelable、drag、keydown、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。