JavaScriptでページが読み込み時に処理を実行するDOMContentLoaded・loadイベントの使い方

ページ読み込み時に処理を実行する

ページ読み込み時に処理を実行したい場合はDOMContentLoadedloadの2つを利用すると便利です。少し違いがありますので、整理しておきましょう。

イベント

イベント意味
DOMContentLoadedHTMLドキュメント(DOM)の読み込みと解析完了後に実行
load全リソース(画像など)の読み込み完了時に実行
DOMContentLoadedイベント
補足

ちなみに、読み込むJavaScriptファイルにdefer属性を付与している場合は、DOMContentLoadedをしても意味がありません。なぜなら、defer属性自体がこのファイルを「HTMLドキュメント(DOM)の読み込みと解析完了後に実行」する様に指示するものだからです。そのため、2回同じ命令をすることになり、DOMContentLoadedはこの場合意味をなさないのです。

サンプルコード

サンプルコードとして、ページ読み込み時にアラートボックスを動作させるサンプルコードを紹介します。

お使いの環境に下記コードを入れて確認してみてください。

JavaScript
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
window.addEventListener('DOMContentLoaded', onClickAction );

/** ボタンをクリックするとアラートを表示 */
function onClickAction() {
	//アラートを表示
	const dateInstance = new Date();
	window.alert(`こんにちは!今日の日付は${dateInstance.getFullYear()}年${dateInstance.getMonth() + 1}月${dateInstance.getDate()}日です。`);
}

なぜ、イベントリスナーの追加が必要?

もし、window.addEventListener('DOMContentLoaded', () => {})を記載せずに<script>タグをheadタグ内に記載した場合どうでしょうか?

HTMLを読み込んだ時、headタグにScriptタグがある場合はJavaScriptが即時実行されます。

もし、DOM要素を参照しない(つまり、document.getElementByIdの様なセレクター系の構文を必要しない)場合はこれでOKです。

しかし、HTMLのbody要素はheadタグの後に読み込まれるので、headタグ内にJavaScriptを記入しても参照するDOM要素の解析が終わっていないため、処理を実行できないのです。

つまり、ページに読み込み時に特定のDOM要素に対する処理を追加したい場合は、<footer>要素内に書くか、DOMContentLoadedloadイベントへの登録が必要になりますが、無用なバグを防ぐため、イベントへの登録が一般的な開発方法になります。

インストラクター
コメント

コメントを残す