JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのロードイベントとは？ページ読み込みイベントの種類と使い方を解説

JavaScriptにおけるページのロードイベントは、Webページが読み込まれる、またはアンロード（破棄）されるタイミングで発生します。これらのイベントを適切に使い分けることで、ページの状態に応じた処理を正確に実行できるようになります。

主なロードイベントの種類

JavaScriptで利用できる代表的なページロードイベントは以下の通りです。

イベント説明
DOMContentLoadedDOMツリーの構築が完了した時点で発生します。スタイルシートや画像などの外部リソースがまだ読み込まれていなくても実行されるため、高速な初期化処理に適しています。
Loadブラウザがすべてのリソース（画像、CSS、スクリプトなど）を完全に読み込んだ時点で発生します。
Beforeunloadページやリソースがアンロードされる直前に発生し、「本当にこのページを離れますか？」といった確認ダイアログを表示したい場合に利用できます。
Unloadページが完全にアンロードされたときに発生します。

JavaScriptでのロードイベントのコード例

次の例では、DOMContentLoadedイベントをリッスンし、DOMの構築完了時にメッセージを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        color: blueviolet;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptのロードイベント</h1>
<div class="result"></div>
<script>
    let resEle = document.querySelector(".result");
    document.addEventListener("DOMContentLoaded", () => {
        resEle.innerHTML = "DOMContentLoaded イベントが発生しました <br>";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ページのHTML解析が完了した直後にDOMContentLoadedイベントが発火し、画面には「DOMContentLoaded イベントが発生しました」というメッセージが表示されます。画像などの外部リソースの読み込みを待たずに処理が実行されるため、ユーザーは素早くコンテンツを操作できるようになります。

なお、画像の読み込み完了など、すべてのリソースを待つ必要がある処理にはwindow.addEventListener("load", ...)を使用してください。用途に応じてイベントを使い分けることが、パフォーマンスとユーザー体験の両立のポイントです。

  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照

  2. SeleniumでJavaScriptを含む複雑なページの読み込み完了を待つ方法

    Seleniumでは、JavaScriptを多用した複雑なページでも、読み込みが完了するまで適切に待機することができます。ページの読み込み状態を確認するには、JavaScriptのdocument.readyStateメソッドを実行し、戻り値がcompleteになるまで待つのが一般的な手法です。基本構文JavascriptExecutorを使って、現在のページの準備状態（readyState）を取得します。JavascriptExecutor js = (JavascriptExecutor)driver; js.executeScript(return document.readyState