Window：load事件
load 事件在整個頁面載入完畢時觸發，包括所有依賴資源，如樣式表、指令碼（包括 async、deferred 和 module 指令碼）、iframe 和影像，但不包括那些已惰性載入的資源。這與 DOMContentLoaded 不同，後者在頁面 DOM 載入完畢後立即觸發，而不等待資源載入完成。
此事件不可取消，也不會冒泡。
注意：所有名為 load 的事件都不會向 Window 傳播，即使將 bubbles 設定為 true 也是如此。要捕獲 window 上的 load 事件，必須直接將該 load 事件分派給 window。
注意： 當主文件載入完畢時分派的 load 事件確實會在 window 上分派，但有兩個被修改的屬性：target 是 document，而 path 是 undefined。這兩個屬性的修改是出於歷史相容性考慮。
為了避免在指令碼所操作的 DOM 完全構建之前執行指令碼，您可以將指令碼放在文件主體末尾，緊接在 </body> 標籤之前，而無需將其包裝在事件監聽器中。通常，您應該只使用 load 事件來等待外部資源（如影像或延遲載入的指令碼）載入。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("load", (event) => { })
onload = (event) => { }
事件型別
一個通用的 Event。
示例
頁面完全載入時記錄一條訊息
js
window.addEventListener("load", (event) => {
console.log("page is fully loaded");
});
相同，但使用了 onload 事件處理程式屬性
js
window.onload = (event) => {
console.log("page is fully loaded");
};
即時示例
HTML
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
js
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`;
});
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-load |
| HTML # delay-the-load-event |
瀏覽器相容性
載入中…
另見
- Document readyState API
- 相關事件