現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

イベント

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

投稿日:2019年6月24日 更新日:

JavaScriptのevent.target・event.typeとは?イベント発生元と種類を取得する方法

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

イベント処理を行ううえで必須の知識なので、しっかり理解しておきましょう。



event.targetプロパティとは?

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

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

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

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



event.typeプロパティとは?

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

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

let myEvent = event.type;

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

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

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

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

→ どの要素でどんなイベントが起きたかをまとめて取得できます。



まとめ

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

関連リンク

-イベント
-

執筆者:

関連記事

【JavaScript入門】onload・onunloadの使い方|ページ読み込み時・離脱時のイベント処理をわかりやすく解説

JavaScriptのonload・onunloadとは?ページ読み込み時・離脱時のイベント処理を解説 onload と onunload は、ページの読み込み完了時やページ移動時に処理を実行するため …

【JavaScript入門】onresizeの使い方|ウィンドウサイズ変更時に処理を実行する方法

JavaScriptのonresizeとは?ウィンドウサイズ変更時に処理を実行する方法 onresize は、ウィンドウやフレームのサイズが変更されたときに発生するイベントです。 画面サイズに応じてレ …

【JavaScript入門】oncontextmenuの使い方|右クリック時のコンテキストメニュー制御をわかりやすく解説

JavaScriptのoncontextmenuとは?右クリック時のコンテキストメニュー制御方法を解説 oncontextmenu は、マウスの右クリックによってコンテキストメニューが表示される直前に …

【JavaScript入門】onfocus・onblurの使い方|入力欄のフォーカス取得・離脱時のイベント処理を解説

JavaScriptのonfocus・onblurとは?入力欄のフォーカス取得・離脱時のイベント処理を解説 onfocus と onblur は、入力欄やウィンドウにフォーカスが当たったとき、または離 …

【JavaScript入門】onchange・onselectの使い方|入力内容の変更・文字選択時のイベント処理を解説

JavaScriptのonchange・onselectとは?入力内容の変更・選択時に発生するイベントを解説 onchange と onselect は、フォーム要素の内容が変化したとき、または文字が …