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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍