onload 事件

DOM 事件 Event 對象

定義和用法

onload 事件在對象被加載后發生。

onload 最常用于 <body> 元素中，用于在網頁完全加載所有內容（包括圖像、腳本文件、CSS 文件等）后執行腳本。

onload 事件可用于檢查訪問者的瀏覽器類型和瀏覽器版本，并根據這些信息加載網頁的正確版本。

onload 事件也可用于處理 cookie (請參閱下面的更多實例).

實例

在頁面加載后立即執行 JavaScript：

<body onload="myFunction()">

親自試一試

例子 2

在 <img> 元素上使用 onload。加載圖像后立即發出“圖像已加載”的提醒：

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

親自試一試

例子 3

使用 onload 事件處理 cookie：

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

親自試一試

語法

在 HTML 中：

<element onload="myScript">

親自試一試

在 JavaScript 中：

object.onload = function(){myScript};

親自試一試

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("load", myScript);

親自試一試

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 不支持
可取消： 不支持
事件類型： 如果從用戶界面生成，UiEvent。否則 Event。
支持的 HTML 標簽： <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM 版本： Level 2 Events

瀏覽器支持

事件 Chrome IE Firefox Safari Opera
onload 支持 支持 支持 支持 支持
DOM 事件 Event 對象