JavaScriptのevent.target・event.typeとは?イベント発生元と種類を取得する方法
event.target と event.type は、イベントオブジェクトから
「どの要素でイベントが起きたか」「どんな種類のイベントか」を取得するためのプロパティです。
イベント処理を行ううえで必須の知識なので、しっかり理解しておきましょう。
event.targetプロパティとは?
event.target は、イベントが発生した要素(オブジェクト)を返します。
クリックされたボタン、変更された入力欄など、イベントの発生元を特定できます。
使用例:クリックされた要素を取得
→ クリックされたボタン要素がコンソールに表示されます。
event.typeプロパティとは?
event.type は、発生したイベントの種類を文字列で返します。
イベント名の on を除いた部分が返されます(例:click、mousedown、keyup)。
使用例:イベントの種類を取得
→ 発生したイベントの種類が myEvent に代入されます。
event.target と event.type を組み合わせた例
<script>
function showInfo(e) {
console.log(‘発生元:’, e.target);
console.log(‘イベント種類:’, e.type);
}
</script>
→ どの要素でどんなイベントが起きたかをまとめて取得できます。
まとめ
event.target:イベントが発生した要素を返すevent.type:発生したイベントの種類を返す- イベント処理のデバッグや条件分岐に非常に便利
- クリック・入力・変更などあらゆるイベントで利用可能