JavaScript ページロードイベント

概要: このチュートリアルでは、DOMContentLoaded、load、beforeunload、unloadなど、ページロードに関連するイベントについて学びます。

JavaScript ページロードイベントの概要

ページを開くと、以下のイベントが順番に発生します。

DOMContentLoaded – ブラウザがHTMLを完全にロードし、DOMツリーの構築を完了しました。ただし、スタイルシートや画像などの外部リソースはまだロードされていません。このイベントでは、DOMノードの選択やインターフェースの初期化を開始できます。
load – ブラウザがHTMLと、画像やスタイルシートなどの外部リソースを完全にロードしました。

ページを離れると、以下のイベントが順番に発生します。

beforeunload – ページとリソースがアンロードされる前に発生します。このイベントを使用して、ページを離れるかどうかを確認する確認ダイアログを表示できます。これにより、ユーザーがフォームに入力中に誤って別のページに移動するリンクをクリックした場合に、データ損失を防ぐことができます。
unload – ページが完全にアンロードされたときに発生します。このイベントを使用して、分析データを送信したり、リソースをクリーンアップしたりできます。

JavaScript ページロードイベントの処理

ページイベントを処理するには、documentオブジェクトでaddEventListener()メソッドを呼び出すことができます。

document.addEventListener('DOMContentLoaded',() => {
    // handle DOMContentLoaded event
});

document.addEventListener('load',() => {
    // handle load event
});

document.addEventListener('beforeunload',() => {
    // handle beforeunload event
});

document.addEventListener('unload',() => {
    // handle unload event
});
Code language: JavaScript (javascript)

以下の例は、ページロードイベントを処理する方法を示しています。

<!DOCTYPE html>
<html>
<head>
    <title>JS Page Load Events</title>
</head>

<body>
    <script>
        addEventListener('DOMContentLoaded', (event) => {
            console.log('The DOM is fully loaded.');
        });

        addEventListener('load', (event) => {
            console.log('The page is fully loaded.');
        });

        addEventListener('beforeunload', (event) => {
            // show the confirmation dialog
            event.preventDefault();
            // Google Chrome requires returnValue to be set.
            event.returnValue = '';
        });

        addEventListener('unload', (event) => {
            // send analytic data
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

このチュートリアルは役に立ちましたか？