Load DOMContentLoaded ReadyStateChange の呼び出し順とwindow, documentオブジェクトからの呼び出し - JavaScript
Load DOMContentLoaded ReadyStateChange の呼び出し順とwindow, documentオブジェクトからの呼び出しについての紹介です。
概要
windowオブジェクト、documentオブジェクトの、loadイベント、DOMContentLoadedイベント、readystatechangeイベントを呼び出し、
呼び出しが有効かどうか、呼び出される順番を確認します。
動作確認
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Window:DOMContentLoadedイベントが実行されました。\r\n";
});
window.addEventListener("readystatechange", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Window:readystatechangeイベントが実行されました。" + document.readyState +"\r\n";
});
window.addEventListener("load", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Window:Loadイベントが実行されました。\r\n";
});
document.addEventListener("DOMContentLoaded", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Document:DOMContentLoadedイベントが実行されました。\r\n";
});
document.addEventListener("readystatechange", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Document:readystatechangeイベントが実行されました。" + document.readyState +"\r\n";
});
document.addEventListener("load", function () {
target = document.getElementById("OutputArea");
target.innerHTML += "Document:Loadイベントが実行されました。\r\n";
});
</script>
</head>
<body>
<p>Loadイベントテストページ</p>
<textarea id="OutputArea" style="width:480px;height:240px;"></textarea>
</body>
</html>
解説
windowオブジェクトのaddEventrListenerメソッドを呼び出し、load, DOMContentLoaded, readystatechange イベントを追加します。
同様にdocumentオブジェクトのaddEventrListenerメソッドを呼び出し、load, DOMContentLoaded, readystatechange イベントを追加します。
ウィンドウが呼び出された順番にテキストボックスにメッセージを表示します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
イベントの実行順は、次の通りです。
- document オブジェクトの readystatechange イベント (interactive への変更)
- document オブジェクトの DOMContentLoaded イベント
- window オブジェクトの DOMContentLoaded イベント
- document オブジェクトの readystatechange イベント (complete への変更)
- window オブジェクトの Load イベント
Load イベントはwindow オブジェクトのみが実行されます。DOMContentLoadedイベントは window オブジェクトとdocumentオブジェクトの両方で実行されます。
readystatechange イベントはdocument オブジェクトのみが実行されます。
Document:readystatechangeイベントが実行されました。interactive
Document:DOMContentLoadedイベントが実行されました。
Window:DOMContentLoadedイベントが実行されました。
Document:readystatechangeイベントが実行されました。complete
Window:Loadイベントが実行されました。
このページのキーワード
- Load DOMContentLoaded ReadyStateChange 呼び出し順
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
