Sự kiện onload

Sự kiện DOM Đối tượng Event

Định nghĩa và cách sử dụng

Sự kiện onload xảy ra sau khi đối tượng được tải.

Sự kiện onload thường được sử dụng trong phần <body> để thực thi đoạn mã sau khi trang web đã tải hoàn toàn tất cả nội dung (bao gồm hình ảnh, tệp script, tệp CSS, v.v.).

Sự kiện onload có thể được sử dụng để kiểm tra loại và phiên bản trình duyệt của người truy cập và tải phiên bản trang web chính xác dựa trên thông tin này.

Sự kiện onload cũng có thể được sử dụng để xử lý cookie (xem thêm các ví dụ dưới đây).

Mô hình

Chạy JavaScript ngay lập tức sau khi tải trang:

<body onload="myFunction()">

Thử trực tiếp

Ví dụ 2

Sử dụng sự kiện onload trong phần tử <img>. Sau khi tải ảnh, hiển thị thông báo "Image is loaded" ngay lập tức:

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

Thử trực tiếp

Ví dụ 3

Sử dụng sự kiện onload để xử lý cookie:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  }
     text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

Thử trực tiếp

Cú pháp

Trong HTML:

<element onload="myScript">

Thử trực tiếp

Trong JavaScript:

object.onload = function(){myScript};

Thử trực tiếp

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("load", myScript);

Thử trực tiếp

Ghi chú:Internet Explorer 8 hoặc sớm hơn không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Bubbling: Không hỗ trợ
Có thể hủy bỏ: Không hỗ trợ
Loại sự kiện: Nếu được tạo từ giao diện người dùng:UiEvent。Còn không: Event。
Các thẻ HTML được hỗ trợ: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
Phiên bản DOM: Sự kiện Level 2

Hỗ trợ trình duyệt

Sự kiện Chrome IE Firefox Safari Opera
onload Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ
Sự kiện DOM Đối tượng Event