DOMContentLoadedイベント
DOMContentLoadedイベントはドキュメントの読み込み、HTMLのパース、DOMの解釈(DOMツリーの構築)、
遅延実行スクリプトの実行が完了したら発生します。
プログラムからDOMContentLoadedを利用する方法はjavascriptのソース内でaddEventListenerの登録で使用できます。
ここで注意が必要なのは、DOMContentLoadedイベントはdocumentオブジェクトのイベントです。
loadイベント
loadイベントはwindowオブジェクトのイベントです。
DOMContentLoadedイベントと似ていますが、このloadイベントはページ全体が画像、CSSを含めて読み込まれた時に発生するイベントです。
readyStateプロパティ
ドキュメントをロードするとき、document.readyStateプロパティはドキュメントの状態を示します。
プログラム内では下記のように書いてその状態を取得します。
let state = document.readyState
この状態については、
loading 読み込み中 interactive HTMLパース、DOMの解釈は完了、画像、css等のリソースは読み込み中 complete HTMLパース、DOMの解釈、その他リソースの読み込みが完了
readystatechangeイベント
上記のイベントとは別に、HTML5ではreadystatechangeイベントを標準化しています。
readystatechangeはdocument.readyStateの値が変更したタイミングで発火します。
loadイベントの直前に発生します。
サンプル
実際の動きをHTMLを用意して試してみます。
まず、DOMContentLoadedイベントの動きをみてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<script type="text/javascript">
console.log("DOMContentLoaded state -> " + document.readyState);
// DOMContentLoadedイベント
document.addEventListener('DOMContentLoaded', function() {
console.log("DOMContentLoaded イベント発火");
console.log("画面の読み込み完了(DOMContentLoaded)");
console.log("DOMContentLoaded state -> " + document.readyState);
}, false);
</script>
<body>
<div>
<div>
DOMContentLoadedテスト<br />
</div>
</div>
</body>
</html>
上記のHTMLにアクセスし、console.logを確認すると、次のように出力されます。
DOMContentLoaded state -> loading DOMContentLoaded イベント発火 画面の読み込み完了(DOMContentLoaded) DOMContentLoaded state -> interactive
では、次にloadイベントの動きをみてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<script type="text/javascript">
console.log("load state -> " + document.readyState);
// loadイベント
window.addEventListener('load', function() {
console.log("load イベント発火");
console.log("画面の読み込み完了(load)");
console.log("load state -> " + document.readyState);
}, false);
</script>
<body>
<div>
<div>
loadテスト<br />
</div>
</div>
</body>
</html>
上記のHTMLにアクセスし、console.logを確認すると、次のように出力されます。
load state -> loading load イベント発火 画面の読み込み完了(load) load state -> complete
最後にreadystatechangeイベントの動きをみてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<script type="text/javascript">
console.log("readystatechange state -> " + document.readyState);
// readystatechangeイベント
document.addEventListener('readystatechange', function() {
console.log("readystatechange イベント発火");
console.log("readystatechange state -> " + document.readyState);
}, false);
// DOMContentLoadedイベント
document.addEventListener('DOMContentLoaded', function() {
console.log("DOMContentLoaded イベント発火");
console.log("画面の読み込み完了(DOMContentLoaded)");
console.log("DOMContentLoaded state -> " + document.readyState);
}, false);
// loadイベント
window.addEventListener('load', function() {
console.log("load イベント発火");
console.log("画面の読み込み完了(load)");
console.log("load state -> " + document.readyState);
}, false);
</script>
<body>
<div>
<div>
readystatechange テスト<br />
</div>
</div>
</body>
</html>
上記のHTMLにアクセスし、console.logを確認すると、次のように出力されます。
readystatechange state -> loading readystatechange イベント発火 readystatechange state -> interactive DOMContentLoaded イベント発火 画面の読み込み完了(DOMContentLoaded) DOMContentLoaded state -> interactive readystatechange イベント発火 readystatechange state -> complete load イベント発火 画面の読み込み完了(load) load state -> complete
ここでわかることは、DOMContentLoadedとloadイベントの処理順がわかります。
最初にloadイベントは、HTMLドキュメント内の画像やCSS等のリソース情報を「完全に」読み込んだ後に実行されます。
DOMContentLoadedはリソース情報の読み込みの前に、HTMLドキュメントのパース、DOMツリーの解析が終わった段階で実行されるので、loadイベントより先に実行されます。
また、readystatechangeについては、各イベントの状態(document.readyState)が変化したタイミングでそれぞれ呼ばれていることがわかります。