onload 事件

เหตุการณ์ DOM องค์ประกอบ Event

คำนิยามและวิธีใช้

onload 事件เกิดขึ้นหลังจากวัตถุถูกโหลด。

onload มักถูกใช้ในประกาย <body> สำหรับปฏิบัติงานสคริปต์หลังจากหน้าเว็บเรียกข้อมูลทั้งหมด (รวมถึงรูปภาพ,ไฟล์สคริปต์,ไฟล์ CSS และอื่นๆ) ได้ทันที。

onload 事件สามารถใช้เพื่อตรวจสอบชนิดและเวอร์ชั่นของเบราเซอร์ของผู้เข้าชมและโหลดเวอร์ชั่นที่ถูกต้องของหน้าเว็บตามข้อมูลดังกล่าว。

เหตุการณ์ onload ก็สามารถใช้เพื่อจัดการ cookie (ดูตัวอย่างเพิ่มเติมด้านล่าง) }}

ตัวอย่าง

ปฏิบัติการ JavaScript ทันทีหลังจากการโหลดเว็บไซต์:

<body onload="myFunction()">

ลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ onload ใน element <img> โดยทันทีที่รูปภาพเข้าข้อมูลจะแสดงการเตือน "รูปภาพได้โหลด" ทันที:

<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

การสนับสนุนเบราเซอร์

เหตุการณ์ Chrome IE Firefox Safari Opera
onload การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน
เหตุการณ์ DOM องค์ประกอบ Event