このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Window: load イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。これはDOMContentLoaded が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。
このイベントはキャンセル不可で、バブリングしません。
メモ:たとえbubbles がtrue に初期化されていても、load という名前のイベントはすべてwindow に伝搬しません。window 上でload イベントを捕捉するには、load イベントを直接window に配信する必要があります。
メモ:メイン文書が読み込まれたときに配信されるload イベントはwindow に配信されますが、 2 つのプロパティが変更されています。target はdocument であり、path はundefined です。これら 2 つのプロパティは過去との互換性のために変更されています。
構文
このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("load", (event) => {});onload = (event) => {};イベント型
一般的なEvent です。
例
ページが完全に読み込まれたときに、メッセージを記録します。
window.addEventListener("load", (event) => { console.log("ページが完全に読み込まれました");});同じですが、onload イベントハンドラープロパティの場合です。
window.onload = (event) => { console.log("page is fully loaded");};ライブデモ
HTML
<div> <button type="button">Reload</button></div><div> <label for="eventLog">Event log:</label> <textarea readonly rows="8" cols="30" ></textarea></div>body { display: grid; grid-template-areas: "control log";}.controls { grid-area: control; display: flex; align-items: center; justify-content: center;}.event-log { grid-area: log;}.event-log-contents { resize: none;}label,button { display: block;}#reload { height: 2rem;}JavaScript
const log = document.querySelector(".event-log-contents");const reload = document.querySelector("#reload");reload.addEventListener("click", () => { log.textContent = ""; setTimeout(() => { window.location.reload(true); }, 200);});window.addEventListener("load", (event) => { log.textContent += "load\n";});document.addEventListener("readystatechange", (event) => { log.textContent += `readystate: ${document.readyState}\n`;});document.addEventListener("DOMContentLoaded", (event) => { log.textContent += `DOMContentLoaded\n`;});結果
仕様書
| Specification |
|---|
| UI Events # event-type-load |
| HTML # delay-the-load-event |