loadイベント

loadイベント

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【loadイベント】
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。

【loadイベントの使い方】
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。

【onload プロパティに、イベントハンドラを登録した場合】
window オブジェクトのプロパティにイベントハンドラを登録する場合は onload プロパティを使用します。

【イベントリスナーを登録する場合】
addEventListener メソッドの一番目の引数には、'load' を指定し、2番目にはイベントハンドラを指定する。

【引き数に Event を使う場合】
＜script＞ function loadFinished(event){
　console.log(event);
}
window.addEventListener('load', loadFinished);
＜/script＞

サンプルコード

ブラウザを立ち上げる

【bodyタグのonload属性を使う】
body タグの onload 属性にイベントハンドラを登録する方法

window オブジェクトの onload プロパティと body タグの onload 属性の両方にイベントハンドラを登録した場合、あとから登録された方のイベントハンドラのみ呼び出されるのでこの二つは内部的には同じものと考えられます。
サンプルコード

ブラウザを立ち上げる

OKボタンをクリックする

【DOMContentLoadedイベントとloadイベントの違い】

HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。この時点で DOMContentLoaded イベントが発生します。

DOMContentLoaded イベントが発生したあと、画像やスタイルシートなどの HTML ページのリソースの読み込みがすべて完了すると load イベントが発生します。このため、順番としては DOMContentLoaded イベントが発生したあとに load イベントが発生します。