スキルアップを始める

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

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

.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()で登録できるイベントと、読み込む順番についての基本となります。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら