JavaScript HTML DOM เหตุการณ์

HTML DOM อนุญาตให้ JavaScript ตอบสนองเหตุการณ์ HTML:

มายังด้านบน!
คลิกที่ฉัน

ตอบสนองเหตุการณ์

JavaScript สามารถทำงานเมื่อเกิดเหตุการณ์ อย่างเช่นเมื่อผู้ใช้คลิกองค์ประกอบ HTML ใดๆ

เพื่อที่จะทำงานเมื่อผู้ใช้คลิกองค์ประกอบ HTML ใดๆ ให้เสริมรหัส JavaScript ลงในคุณสมบัติเหตุการณ์ HTML:

onclick=JavaScript

ตัวอย่างของสิ่งที่เกิดเหตุจาก HTML:

  • เมื่อผู้ใช้คลิกแมวสัญญาณ
  • ขณะที่เว็บไซต์ถูกโหลด
  • ขณะที่ภาพถูกโหลด
  • ขณะที่เมาส์เคลื่อนตัวไปที่องค์ประกอบ
  • ขณะที่ช่องใส่ข้อมูลถูกเปลี่ยน
  • ขณะที่ฟอร์ม HTML ถูกส่ง
  • ขณะที่ผู้ใช้กดทางก์ชัน

ในตัวอย่างนี้ ขณะที่ผู้ใช้คลิก <h1> จะเปลี่ยนเนื้อหาของมัน

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">คลิกข้อความนี้!</h1>
</body>
</html>

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

ในตัวอย่างนี้ จากการเรียกใช้ฟังก์ชันด้วยฟังก์ชันฝึกสอบ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">คลิกข้อความนี้!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

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

รายละเอียดเหตุการณ์ HTML

ถ้าต้องการแจกจ่ายเหตุการณ์ให้กับองค์ประกอบ HTML คุณสามารถใช้รายละเอียดเหตุการณ์

ตัวอย่าง

แจกจ่ายสำหรับปุ่ม onclick เหตุการณ์:

<button onclick="displayDate()">ลองด้วยตัวเอง</button>

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

ในตัวอย่างนี้ ฟังก์ชันที่ชื่อ displayDate จะถูกปฏิบัติเมื่อปุ่มถูกคลิก

แจกจ่ายเหตุการณ์ด้วย HTML DOM

HTML DOM อนุญาตให้คุณใช้ JavaScript แจกจ่ายเหตุการณ์ให้กับองค์ประกอบ HTML:

ตัวอย่าง

กำหนดสำหรับปุ่ม onclick เหตุการณ์:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

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

ในตัวอย่างดังกล่าว ฟังก์ชันที่ชื่อ displayDate ถูกแจกจ่ายให้กับองค์ประกอบ HTML ที่มี id="myBtn"

ขณะที่คลิกที่ปุ่ม จะมีการปฏิบัติฟังก์ชัน

เหตุการณ์ onload และ onunload

ขณะที่ผู้ใช้เข้าหน้าและออกหน้า จะเกิดเหตุการณ์ onload และ onunload เหตุการณ์

onload เหตุการณ์นี้สามารถใช้ในการตรวจสอบประเภทและสัปดาห์ของเบราเซอร์ผู้เข้าชม และหลังจากนั้นจะโหลดเวอร์ชันเว็บไซต์ที่เหมาะสม

onload และ onunload เหตุการณ์นี้สามารถใช้ในการจัดการ cookie

ตัวอย่าง

<body onload="checkCookies()">

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

เหตุการณ์ onchange

onchange เหตุการณ์นี้มักถูกใช้ร่วมกับการเช็คช่างของช่องใส่ข้อมูล

ด้านล่างนี้คือวิธีการใช้ onchange ตัวอย่างนี้ ขณะที่ผู้ใช้เปลี่ยนเนื้อหาในช่องใส่ข้อมูล จะเรียกใช้ฟังก์ชัน upperCase()

ตัวอย่าง

<input type="text" id="fname" onchange="upperCase()">

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

เหตุการณ์ onmouseover และ onmouseout

onmouseover และ onmouseout เหตุการณ์สามารถใช้เมื่อผู้ใช้เคลื่อนเมาส์ไปที่องค์ประกอบ HTML หรือออกจากองค์ประกอบเพื่อกระตุ้นฟังก์ชันบางอย่าง

มายังด้านบน!

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

เหตุการณ์ onmousedown, onmouseup และ onclick

onmousedown, onmouseup และ onclick เหตุการณ์ทั้งหมดมีส่วนเกี่ยวข้องกับเหตุการณ์การกดทับปุ่มเมาส์

สุดท้าย เมื่อมีการกดทับปุ่มเมาส์onmousedown เหตุการณ์ได้ถูกกระตุ้น; หลังจากนั้น เมื่อปุ่มเมาส์ถูกปล่อยonmouseup เหตุการณ์ได้ถูกกระตุ้น; สุดท้าย หลังจากที่มีการกดทับปุ่มเมาส์onclick เหตุการณ์ได้ถูกกระตุ้น

คลิกที่ฉัน

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

ตัวอย่างเพิ่มเติม

onmousedown และ onmouseup
เปลี่ยนรูปภาพเมื่อผู้ใช้กดทับปุ่มเมาส์
onload
แสดงตัวแจ้งเตือนเมื่อเว็บไซต์เสร็จการโหลด
onfocus
เปลี่ยนสีพื้นหลังของโฟลด์เมื่อได้รับความสนใจ
เหตุการณ์เมาส์
เปลี่ยนสีขององค์ประกอบเมื่อตายงานอยู่บนองค์ประกอบ

คู่มืออ้างอิงองค์ประกอบ Event ของ HTML DOM

ถ้าต้องการรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดเข้าเว็บไซต์ของเราที่เต็มทั้งหมด คู่มืออ้างอิงองค์ประกอบ Event ของ HTML DOM.