.addEventListener()とは？
JavaScriptで、.addEventListener()はイベントリスナーを登録するためのメソッドです。
下記のように使用します。
window.addEventListener('load', function() {
// ページの読み込みが完了した時の処理
});上記のように書くことで、ページが読み込まれた時点でイベントリスナーを実行することができます。
.addEventListener() イベント一覧
.addEventListener()で登録できるイベントは以下の通りです。
- DOMContentLoaded:DOMの読み込みが完了した時に発生します。
- load: ページの読み込みが完了した時に発生します。
- click: 要素がクリックされた時に発生します。
- submit: フォームが送信された時に発生します。
- focus: 要素がフォーカスされた時に発生します。
- blur: 要素からフォーカスが外れた時に発生します。
- keydown: キーが押された時に発生します。
- keyup: キーが離された時に発生します。
- change: フォームの値が変更された時に発生します。
- mouseover: 要素にマウスカーソルが乗った時に発生します。
- mouseout: 要素からマウスカーソルが離れた時に発生します。
WEBページを読み込む順番
ウェブページが読み込まれる順番は、一般的に以下のような流れになります。
- HTMLが読み込まれる
- HTMLに記述されたCSSやJavaScriptなどの外部ファイルが順に読み込まれる
- HTMLの読み込みが完了した時に
windowオブジェクトがloadイベントを発生させる
そのため、JavaScriptで.addEventListener()を使ってイベントリスナーを登録する場合、以下のように書くことで、ページが読み込まれた時点でイベントリスナーを実行することができます。
window.addEventListener('load', function() {
// ページの読み込みが完了した時の処理
});ただし、上記のコードではwindowオブジェクトがloadイベントを発生させるまでに時間がかかるため、ページが表示されるまでに時間がかかる場合があります。
そのため、必要に応じて、DOMContentLoadedイベントを使うこともできます。
document.addEventListener('DOMContentLoaded', function() {
// HTMLの読み込みが完了した時の処理
});DOMContentLoadedイベントは、HTMLの読み込みが完了した時点で発生します。
まとめ
以上が、.addEventListener()で登録できるイベントと、読み込む順番についての基本となります。
