【JavaScript】addEventListener()で登録できるイベント一覧と読み込む順番

.addEventListener()とは？

JavaScriptで、.addEventListener()はイベントリスナーを登録するためのメソッドです。

下記のように使用します。

window.addEventListener('load', function() {
  // ページの読み込みが完了した時の処理
});

上記のように書くことで、ページが読み込まれた時点でイベントリスナーを実行することができます。

.addEventListener() イベント一覧

.addEventListener()で登録できるイベントは以下の通りです。

• DOMContentLoaded:DOMの読み込みが完了した時に発生します。
• load: ページの読み込みが完了した時に発生します。
• click: 要素がクリックされた時に発生します。
• submit: フォームが送信された時に発生します。
• focus: 要素がフォーカスされた時に発生します。
• blur: 要素からフォーカスが外れた時に発生します。
• keydown: キーが押された時に発生します。
• keyup: キーが離された時に発生します。
• change: フォームの値が変更された時に発生します。
• mouseover: 要素にマウスカーソルが乗った時に発生します。
• mouseout: 要素からマウスカーソルが離れた時に発生します。

WEBページを読み込む順番

ウェブページが読み込まれる順番は、一般的に以下のような流れになります。

1. HTMLが読み込まれる
2. HTMLに記述されたCSSやJavaScriptなどの外部ファイルが順に読み込まれる
3. HTMLの読み込みが完了した時にwindowオブジェクトがloadイベントを発生させる

そのため、JavaScriptで.addEventListener()を使ってイベントリスナーを登録する場合、以下のように書くことで、ページが読み込まれた時点でイベントリスナーを実行することができます。

window.addEventListener('load', function() {
  // ページの読み込みが完了した時の処理
});

ただし、上記のコードではwindowオブジェクトがloadイベントを発生させるまでに時間がかかるため、ページが表示されるまでに時間がかかる場合があります。

そのため、必要に応じて、DOMContentLoadedイベントを使うこともできます。

document.addEventListener('DOMContentLoaded', function() {
  // HTMLの読み込みが完了した時の処理
});

DOMContentLoadedイベントは、HTMLの読み込みが完了した時点で発生します。

まとめ

以上が、.addEventListener()で登録できるイベントと、読み込む順番についての基本となります。