Categories: JavaScript

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

DOMContentLoadedイベント

DOMContentLoadedイベント

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

js

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

loadイベント

loadイベント

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

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

js

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

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

js

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

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

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

issiki_wp