こんにちは、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の使い方とイベントタイプ一覧のご紹介でした!