最終更新日：
公開日：
レシピ
イベント
ページが読み込まれたら処理を実行する
ページが読み込まれたタイミングに指定した処理を実行する方法について解説します。
この記事のポイント
- イベントDOMContentLoadedはHTMLを読み込んだら発生
- イベントloadはCSSや画像など関連ファイルを読み込んだら発生
- 発生するタイミングはDOMContentLoadedの方が速い
目次
ページが読み込まれたときに発生するイベント
ページが読み込まれたときは2種類のイベントが発生します。
まずはHTMLが読み込まれたタイミングで発生するDOMContentLoaded、続いてCSSや画像などリソースファイルを読み込んだタイミングに発生するloadです。
次の画像はイベントDOMContentLoadedとloadでそれぞれconsole.logメソッドを呼び出している例です。
発生する順番はHTMLが用意できた時点で発生するDOMContentLoadedの方が先になるため、DOMやイベントリスナーの登録、ファイルの読み込みなどに関する処理を実行するときはこのイベントを使います。
一方でloadはCSSの調整やファイルの読み込み状況など、リソースファイルを一通り読み込んだことを前提に処理を実行するときに使います。
冒頭の画像で実行しているコードは次のようになります。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
console.log("load：リソースファイルを全て読み込みました。");
});
window.addEventListener('DOMContentLoaded', function(){
console.log("DOMContentLoaded：HTMLを読み込みました。");
});
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>loadを先に記述していますが、イベントが発生するタイミングはDOMContentLoadedの方が速いため、console.logメソッドが実行される順番も画像のようになっています。
ページを読み込んだらイベントリスナーを設定する
イベントDOMContentLoadedやloadはページの下準備をするような用途として使用するケースが多いです。
以下のコードは、ページのHTMLが読み込まれてDOMContentLoadedが発生したタイミングで、id属性「content1」を持つsection要素にイベントリスナーを登録している例です。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('DOMContentLoaded', function(){
// イベントリスナー登録
document.getElementById("content1").addEventListener('click', sayHello);
});
function sayHello() {
alert("Hello");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>