HTMLElement: load 事件
load 事件會在包含資源的元素成功載入資源後觸發。當前支援該事件的 HTML 元素包括：<body>、<embed>、<iframe>、<img>、<link>、<object>、<script>、<style> 和 <track>。
注意：HTMLBodyElement 上的 load 事件實際上是 window.onload 事件的別名。因此，load 事件只會在文件的所有資源載入完成或出錯後，在 <body> 元素上觸發一次。但是，為了清晰起見，建議直接將事件處理器附加到 window 物件上，而不是 HTMLBodyElement。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("load", (event) => { })
onload = (event) => { }
事件型別
一個通用的 Event。
示例
此示例將在 <img> 元素成功載入其資源時，將訊息列印到螢幕上。
HTML
html
<img
id="image"
src="/shared-assets/images/examples/favicon144.png"
alt="MDN logo"
width="72" />
<div><button>Reload</button></div>
JavaScript
js
const image = document.getElementById("image");
image.onload = () => {
document.body.appendChild(document.createElement("div")).textContent =
"loaded!";
};
document.querySelector("button").addEventListener("click", reload);
function reload() {
image.src = "/shared-assets/images/examples/favicon144.png";
}
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-load |
| HTML # handler-onload |
| HTML # event-load |
瀏覽器相容性
載入中…