JavaScript | イベントの種類を取得する方法

2022-02-06JavaScript,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);

2022-02-06JavaScript,JavaScript イベント

Posted by Yousuke.U