event.target

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

意味イベントの発生源

event.targetとは？

イベントが発生したDOM要素を参照します。

event.targetの具体的な使い方

event.targetとevent.currentTargetの比較

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

<script>
function handleClick(e) {
  console.log('event.target:', e.target.id);
  console.log('event.currentTarget:', e.currentTarget.id);
}

document.getElementById('outer').addEventListener('click', handleClick);
document.getElementById('inner').addEventListener('click', handleClick);
document.getElementById('button').addEventListener('click', handleClick);
</script>

この例では、ネストされた要素にイベントリスナーを設定し、event.targetとevent.currentTargetの違いを示しています。ボタンをクリックすると、イベントがバブリングし、各要素でイベントハンドラが呼び出されます。event.targetは常に最初にクリックされた要素（ボタン）を指しますが、event.currentTargetは現在のイベントハンドラが設定されている要素を指します。

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

Q. event.targetとは何ですか？

A. event.targetは、イベントが最初に発生した DOM 要素を参照します。つまり、ユーザーが実際に操作した（クリックした、入力したなど）要素を指します。

Q. currentTargetとの違いは？

A. event.targetはイベントが発生した要素を指しますが、event.currentTargetは現在のイベントハンドラがアタッチされている要素を指します。イベントの伝播（バブリング）時に、この2つは異なる値を持つことがあります。

Q. event.targetの使用例は？

A. event.targetは、クリックされた特定の要素に対して操作を行いたい場合によく使用されます。例えば、リスト内の特定のアイテムがクリックされたときにそのアイテムの内容を変更するなどの操作に利用できます。

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

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

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