【JavaScript入門】ページ読み込み時にJavascriptを実行する方法

2021年5月15日2023年1月22日

DOMContentLoadedイベント

DOMContentLoadedイベントは、ページのロードが完了したタイミングで発火するイベントです。画像のロードは待ちません。
イベントリスナーでのみ使えます。

window.addEventListener('DOMContentLoaded', function(){
    console.log("DOMContentLoadedです！");
});

loadイベントは、DOMや画像を含むページ全体の読み込みが完了した場合に発火するイベントです。
ブラウザの「戻る」などキャッシュから読み込まれた場合は発火しません。

イベントハンドラで定義する場合は以下のように記述します。

window.onload = function() {
    console.log("loadイベントハンドラから呼び出されました！");
};

イベントリスナとして定義する場合は以下のように記述します。

window.addEventListener("load",function(){
    console.log("イベントリスナからloadイベントが呼び出されました！");
});

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！