【JavaScript】addEventListenerの使い方とイベントタイプ一覧

こんにちは、Ryohei（@ityryohei）です！

JavaScriptのaddEventListenerの基本的な使い方とイベントタイプ一覧のご紹介です。

addEventListenerはJavaScriptでイベントを処理する際に使用するメソッドです。ここでいうイベントというのはマウスのクリックやスクロール、キーボードの入力などです。イベントの種類は数多くあるため、随時更新していければと思います。

では、解説していきます。

addEventListenerの基本的な使い方

まずはaddEventListenerの基本的な使い方から。

下記はaddEventListenerの構文です。addEventListenerを使用するの基本的な書き方になります。

element.addEventListener(イベントタイプ, 関数, false);

引数は全部で三つ指定することができます。

第一引数

第一引数には処理したいイベントタイプを指定します。イベントタイプにはマウスのクリックやキーボードの入力といった種類を指定します。

第二引数

第二引数にはイベントタイプに指定したイベントが発生した場合に実行したい処理内容を指定します。

第三引数

第三引数にはイベントを受け取るタイミングを指定することができます。

詳しくは下記のページをご参照いただければと思います。

EventTarget.addEventListener()｜MDN

addEventListenerで使用する主なイベントタイプ一覧

リソースイベント

load	リソース全体の読み込みが完了した際にイベントが発生します。

ビューイベント

resize	ビュー(ブラウザの表示領域)のサイズが変更されたときにイベントが発生します。
scroll	ビューまたは要素がスクロールされた際にイベントが発生します。

マウスイベント

click	ユーザーが要素をクリックしたときにイベントが発生します。
contextmenu	ユーザーが要素を右クリックしてコンテキストメニューを開いた際にイベントが発生します。
dblclick	ユーザーが要素をダブルクリックしたときにイベントが発生します。
mousedown	ユーザーが要素上でマウスボタンを押すと、イベントが発生します。
mouseenter	ポインタが要素上に移動したときに発生します
mouseleave	ポインタが要素の外に移動したときに発生します
mousemove	要素上にあるときにポインタが移動しているときにイベントが発生します。
mouseover	ポインタが要素上、またはその要素が入れ子になっている場合、一つ外に移動したときに発生します。
mouseout	ユーザーがマウスポインタを要素の外、またはその要素が入れ子になっている場合、一つ外に移動したときに発生します。
mouseup	ユーザーが要素上でマウスボタンを離したときにイベントが発生します。
wheel	マウスホイールが要素上で上下に回転すると発生します。

キーボードイベント

keydown	キーボードの任意のキーが押された際にイベントが発生します。
keypress	キーボードの「Shift、Fn、CapsLock」以外のキーが押された際にイベントが発生します。キーが押されたままの状態の場合はイベントが連続して発生します。
keyup	キーボードのキーが押された状態から解放された際にイベントが発生します。

※随時更新

以上、JavaScriptにおけるaddEventListenerの使い方とイベントタイプ一覧のご紹介でした！