HTMLElement: 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.

Sự kiện load kích hoạt với các phần tử chứa tài nguyên khi tài nguyên đã tải thành công. Hiện tại, danh sách các phần tử HTML được hỗ trợ bao gồm: <body>, <embed>, <iframe>, <img>, <link>, <object>, <script>, <style> và <track>.

Note: Sự kiện load trên HTMLBodyElement thực chất là bí danh của sự kiện window.onload. Do đó, sự kiện load chỉ kích hoạt trên phần tử <body> sau khi tất cả tài nguyên của tài liệu đã tải hoặc gặp lỗi. Tuy nhiên, để rõ ràng hơn, nên gắn trình xử lý sự kiện trực tiếp vào đối tượng window thay vì trên HTMLBodyElement.

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.

addEventListener("load", (event) => { })

onload = (event) => { }

<img
  id="image"
  src="/shared-assets/images/examples/favicon144.png"
  alt="MDN logo"
  width="72" />
<div><button>Reload</button></div>

JavaScript

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";
}