ページ：DOMContentLoaded、load、beforeunload、unload

HTMLページのライフサイクルには3つの重要なイベントがあります：

• DOMContentLoaded –ブラウザがHTMLを完全にロードし、DOMツリーが構築されますが、画像<img>やスタイルシートなどの外部リソースがまだロードされていない可能性があります。
• load – HTMLだけでなく、すべての外部リソース（画像、スタイルなど）も読み込まれます。
• beforeunload/unload –ユーザーがページを離れています。

各イベントが役立つ場合があります：

• DOMContentLoadedイベント–DOMの準備ができています、ハンドラーがDOMノードを検索し、インターフェースを初期化できるようにします。
• loadイベント–外部リソースが読み込まれるため、スタイルが適用され、画像サイズがわかります。
• beforeunloadイベント–ユーザーが退会します：ユーザーが変更を保存したかどうかを確認し、本当に退会するかどうかを尋ねることができます。
• –ユーザーはほとんど離れましたが、統計の送信など、いくつかの操作を開始できます。

これらのイベントの詳細を調べてみましょう。

DOMContentLoaded

DOMContentLoadedイベントはdocumentオブジェクトで発生します。

キャッチするにはaddEventListenerを使用する必要があります：

例：

この例では、DOMContentLoadedハンドラーはドキュメントの読み込み時に実行されるため、すべての要素を表示できます。以下の<img>を含みます。

ただし、画像が読み込まれるのを待ちません。したがって、alertはゼロサイズを示します。

一見すると、DOMContentLoadedイベントは非常に単純です。 DOMツリーの準備が整いました–これがイベントです。ただし、いくつかの特徴があります。

DOMContentLoadedとスクリプト

ブラウザがHTMLドキュメントを処理し、<script>タグに遭遇すると、 DOMの構築を続行する前に実行する必要があります。スクリプトがDOMを変更し、document.writeを変更する可能性があるため、これは予防策です。そのため、DOMContentLoadedは待機する必要があります。

したがって、DOMContentLoadedは、このようなスクリプトの後に必ず発生します。

上記の例では、最初に「ライブラリが読み込まれました…」、次に「DOMの準備ができました！」と表示されます。 （すべてのスクリプトが実行されます。）

DOMContentLoadedとスタイル

外部スタイルシートはDOMに影響を与えないため、DOMContentLoadedはそれらを待機しません。

ただし、落とし穴。スタイルの後にスクリプトがある場合、そのスクリプトはスタイルシートが読み込まれるまで待機する必要があります。

この理由は、スクリプトが要素の座標やその他のスタイルに依存するプロパティを取得する必要があるためです。上記の例。当然、スタイルが読み込まれるのを待つ必要があります。

DOMContentLoadedはスクリプトを待つため、スタイルの前にもスタイルを待つようになりました。

組み込みのブラウザ自動入力

DOMContentLoadedのFirefox、Chrome、Operaの自動入力フォーム。

たとえば、ページにログインとパスワードを入力してフォームに入力すると、ブラウザが値を記憶し、DOMContentLoadedで自動入力を試みる場合があります（ユーザーが承認した場合）。

DOMContentLoadedは、スクリプトの読み込みが長いため延期され、自動入力も待機します。一部のサイトで（ブラウザの自動入力を使用している場合）、ログイン/パスワードフィールドがすぐに自動入力されないことをおそらくご存知でしょうが、ページが完全に読み込まれるまで遅延があります。これは、実際にはDOMContentLoadedイベントまでの遅延です。

window.onload

load windowオブジェクトのイベントは、スタイル、画像、その他のリソースを含むページ全体が読み込まれたときにトリガーされます。このイベントは、onloadプロパティを介して利用できます。

window.onloadは待機するため、以下の例は画像サイズを正しく示しています。すべての画像：

window.onunload

訪問者がページを離れると、unloadイベントが。関連するポップアップウィンドウを閉じるなど、遅延を伴わない何かをそこで行うことができます。

注目すべき例外は分析の送信です。

ページの状態に関するデータを収集するとします。使用：マウスクリック、スクロール、表示されたページ領域など。

当然のことながら、unloadイベントは、ユーザーが私たちを離れるときに発生します。サーバーにデータを保存します。

バックグラウンドでデータを送信します。別のページへの移行は遅れません。ブラウザはページを離れますが、それでもsendBeaconを実行します。

使用方法は次のとおりです：

• リクエストはPOSTとして送信されます。
• フェッチの章で説明されているように、文字列だけでなくフォームやその他の形式も送信できますが、通常は文字列化されたオブジェクトです。
• データは64kbに制限されています。

sendBeaconリクエストが終了すると、ブラウザはおそらくすでにドキュメントを離れているため、サーバーの応答を取得する方法はありません（通常、分析では空です）。

このような「ページ左後」のリクエストを実行するためのkeepaliveフラグもあります。一般的なネットワークリクエストのフェッチメソッドで。詳細については、フェッチAPIの章をご覧ください。

別のページへの移行をキャンセルする場合、ここでは実行できません。ただし、別のページを使用できます。イベント– onbeforeunload。

window.onbeforeunload

訪問者がナビゲーションを開始した場合awページからアクセスするか、ウィンドウを閉じようとすると、beforeunloadハンドラーが追加の確認を求めます。

イベントをキャンセルすると、ブラウザーが訪問者に確認を求める場合があります。

次のコードを実行してからページをリロードすることで試すことができます：

歴史的な理由から、空でない文字列を返すこともキャンセルとしてカウントされます行事。以前はブラウザがメッセージとして表示していましたが、最近の仕様では表示されるべきではありません。

例を次に示します。

動作が変更されました、一部のWebマスターは、誤解を招くような迷惑なメッセージを表示して、このイベントハンドラーを悪用したためです。そのため、現在のところ、古いブラウザではメッセージとして表示される場合がありますが、それ以外に、ユーザーに表示されるメッセージをカスタマイズする方法はありません。

readyState

設定するとどうなりますかドキュメントが読み込まれた後のDOMContentLoadedハンドラー？

当然、実行されることはありません。

ドキュメントが読み込まれたかどうかわからない場合があります。ドキュメントの準備ができているかどうか。 DOMがロードされたときに、現在または後で関数を実行する必要があります。

document.readyStateプロパティは、現在のロード状態を示します。

3つの可能な値があります：

• "loading" –ドキュメントが読み込まれています。
• "interactive" –ドキュメントが完全に読み取られました。
• "complete" –ドキュメントが完全に読み取られ、すべてのリソース（画像など）が読み込まれます。

document.readyStateを確認してハンドラーを設定するか、準備ができたらすぐにコードを実行できます。

あります。また、状態が変化したときにトリガーされるreadystatechangeイベントなので、次のようにこれらすべての状態を出力できます。

readystatechange eventは、ドキュメントの読み込み状態を追跡するための代替メカニズムであり、ずっと前に登場しました。今日では、ほとんど使用されていません。

完全を期すために、完全なイベントフローを見てみましょう。

これは、<iframe>、

とイベントをログに記録するハンドラー：

実際の例はサンドボックスにあります。

一般的な出力：

角括弧内の数字は、それが発生するおおよその時間を示します。同じ数字でラベル付けされたイベントは、ほぼ同時に発生します（±数ミリ秒）。

• document.readyStateはinteractive DOMContentLoadedの直前。これら2つのことは、実際には同じ意味です。
• document.readyStateは、すべてのリソース（iframeとimg）が読み込まれます。ここでは、img.onload（imgが最後のリソース）および。 complete状態に切り替えることは、window.onloadと同じ意味です。違いは、window.onloadは常に他のすべてのloadハンドラーの後に機能することです。

概要

ページ読み込みイベント：

• DOMContentLoadedイベントは、DOMが次の場合にdocumentでトリガーされます。準備ができました。この段階で要素にJavaScriptを適用できます。
  • <script>https://javascript.info/...</script>や<script src="https://javascript.info/..."></script>などのスクリプトはDOMContentLoadedをブロックし、ブラウザは待機します
  • 画像やその他のリソースも引き続き読み込まれる可能性があります。
• load windowのイベントは、ページとすべてのリソースが読み込まれたときにトリガーされます。通常、それほど長く待つ必要がないため、使用することはめったにありません。
• windowのbeforeunloadイベントは、ユーザーがページを離れたいときにトリガーされます。イベントをキャンセルすると、ブラウザはユーザーが本当に離れたいかどうかを尋ねます（たとえば、変更が保存されていません）。
• iv id = “のunloadイベントaaf4712b82 “> は、ユーザーが最終的に離れるときにトリガーされます。ハンドラーでは、遅延やユーザーへの質問を伴わない単純なことしか実行できません。その制限のため、めったに使用されません。 navigator.sendBeaconを使用してネットワークリクエストを送信できます。
• document.readyStateはドキュメントの現在の状態であり、変更は可能です。 readystatechangeイベントで追跡されます：
  • loading –ドキュメントが読み込まれています。
  • interactive –ドキュメントが解析され、DOMContentLoadedとほぼ同時に発生しますが、その前に発生します。
  • complete –ドキュメントとリソースが読み込まれ、window.onloadとほぼ同時に発生しますが、その前に発生します。