【JavaScript入門】event.target・event.typeの使い方｜イベント発生元と種類を取得する方法

event.target と event.type は、イベントオブジェクトから
「どの要素でイベントが起きたか」 と
「どんな種類のイベントか」 を取得するためのプロパティです。

クリック・入力・変更・マウス操作など、あらゆるイベントで利用できるため、
イベント処理を行ううえで必須の知識です。

event.target プロパティとは？

event.target は、イベントが発生した要素（オブジェクト）を返します。
クリックされたボタン、変更された入力欄など、イベントの発生元を特定できます。

特に「イベント委譲（イベントデリゲーション）」で頻繁に使われる重要なプロパティです。

使用例：クリックされた要素を取得

<button onclick="console.log(event.target)">クリック</button>

→ クリックされたボタン要素がコンソールに表示されます。

event.type プロパティとは？

event.type は、発生したイベントの種類を文字列で返します。
イベント名の on を除いた部分（例：click、input、keyup）が返されます。

イベントの種類によって処理を分岐したいときに便利です。

使用例：イベントの種類を取得

let myEvent = event.type;
console.log(myEvent);

→ 発生したイベントの種類が myEvent に代入されます。

event.target と event.type を組み合わせた例

2つを組み合わせることで、
「どの要素で」「どんなイベントが」 発生したかをまとめて取得できます。

<button onclick="showInfo(event)">ボタン</button>

<script>
function showInfo(e) {
  console.log('発生元：', e.target);
  console.log('イベント種類：', e.type);
}
</script>

→ イベント発生元と種類を同時に確認できます。

実践例：複数ボタンのクリックを1つの関数で処理

event.target を使うと、複数のボタンをまとめて処理する「イベント委譲」が簡単に実現できます。

<div onclick="handleClick(event)">
  <button data-id="save">保存</button>
  <button data-id="delete">削除</button>
</div>

<script>
function handleClick(e) {
  if (e.target.dataset.id === 'save') console.log('保存処理');
  if (e.target.dataset.id === 'delete') console.log('削除処理');
}
</script>

→ ボタンごとにイベントを設定する必要がなく、コードがスッキリします。

まとめ

• event.target：イベントが発生した要素を返す
• event.type：発生したイベントの種類を返す
• デバッグ・条件分岐・イベント委譲に非常に便利
• クリック・入力・変更などあらゆるイベントで利用可能