JavaScript | イベントの種類を取得する方法
JavascriptでaddEventListener()を使ったイベントの実行時にイベントの種類（タイプ）を取得する方法を紹介しています。
無名関数で実行するイベントの場合はあまり用途はありませんが、左右のクリックやキー入力、マウスホバーなどのイベントの種類を取得する事で、複数の種類のイベント実行時に同じ関数を呼び出すコードを記述するのに役立ちます。
イベントの種類を取得する実装サンプル
JavascriptのaddEventListener()の実行時にイベントの種類を取得する実装サンプルとサンプルコードになります。
See the Pen JavaScript | Remove mouse hover events by yochans (@yochans) on CodePen.
HTMLには動作テスト用の要素として<div>タグで設置しています。
<div class="item"></div>要素をクリック、マウスカーソルが要素内に入ったら、要素内から外れたらという3種類の発火イベントにはaddEventListener()でそれぞれ「click」「mouseover」「mouseleave」を指定しています。
呼び出す関数mouse_event_func()はイベントの情報を含む第一引数「event」を受け取ります。
3つのイベントはいずれも同じ関数mouse_event_func()を呼び出していますが、関数内でevent.typeを使ってイベントの種類を取得する事で、クリックなのか、マウスホバーなのかなどをチェックして違う処理を実行しています。
let mouse_event_func = () => {
if (event.type == 'click') {
event.target.style.background = '#ff6347';
}
if (event.type == 'mouseover') {
event.target.style.background = '#000080';
}
if (event.type == 'mouseleave') {
event.target.style.background = '#4169e1';
}
};
document.querySelector(`.item`).addEventListener('click', mouse_event_func, false);
document.querySelector(`.item`).addEventListener('mouseover', mouse_event_func, false);
document.querySelector(`.item`).addEventListener('mouseleave', mouse_event_func, false);