Window: sự kiện load
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts (including async, deferred, and module scripts), iframes, and images, except those that are loaded lazily.
This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
This event is not cancelable and does not bubble.
Note:
All events named load will not propagate to Window, even with bubbles initialized to true. To catch load events on the window, that load event must be dispatched directly to the window.
Note:
The load event that is dispatched when the main document has loaded is dispatched on the window, but has two mutated properties: target is document, and path is undefined. These two properties are mutated due to legacy conformance.
To avoid running a script before the DOM it manipulates has been fully constructed, you can place the script at the end of the document body, immediately before the closing </body> tag, without wrapping it in an event listener. You should usually only use the load event to wait for external resources, such as images or deferred scripts, to load.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập thuộc tính trình xử lý sự kiện.
addEventListener("load", (event) => { })
onload = (event) => { }
Kiểu sự kiện
Một Event chung.
Ví dụ
Log a message when the page is fully loaded:
window.addEventListener("load", (event) => {
console.log("page is fully loaded");
});
The same, but using the onload event handler property:
window.onload = (event) => {
console.log("page is fully loaded");
};
Live example
HTML
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label for="eventLog">Event log:</label>
<textarea
readonly
class="event-log-contents"
rows="8"
cols="30"
id="eventLog"></textarea>
</div>
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`;
});
Result
Đặc tả kỹ thuật
| Specification |
|---|
| UI Events # event-type-load |
| HTML # delay-the-load-event |
Tính tương thích trên trình duyệt
Xem thêm
- Document readyState API
- Related events: