JavaScript HTML DOM เหตุการณ์
HTML DOM อนุญาตให้ JavaScript ตอบสนองต่อเหตุการณ์ HTML:
ปฏิกิริยาต่อเหตุการณ์
JavaScript สามารถดำเนินการได้เมื่อมีเหตุการณ์เกิดขึ้น เช่น เมื่อผู้ใช้คลิกที่องค์ประกอบ HTML
หากต้องการรันโค้ดเมื่อผู้ใช้คลิกที่องค์ประกอบ ให้เพิ่มโค้ด JavaScript ลงในแอตทริบิวต์เหตุการณ์ HTML:
onclick=JavaScript
ตัวอย่างของเหตุการณ์ HTML:
- เมื่อผู้ใช้คลิกเมาส์
- เมื่อโหลดหน้าเว็บแล้ว
- เมื่อโหลดรูปภาพแล้ว
- เมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ
- เมื่อช่องใส่ข้อมูลเปลี่ยนไป
- เมื่อส่งแบบฟอร์ม HTML
- เมื่อผู้ใช้กดแป้น
ในตัวอย่างนี้ เนื้อหาของ<h1>
องค์ประกอบจะเปลี่ยนไปเมื่อผู้ใช้คลิกที่องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
ในตัวอย่างนี้ ฟังก์ชันถูกเรียกจากตัวจัดการเหตุการณ์:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
แอตทริบิวต์เหตุการณ์ HTML
ในการกำหนดเหตุการณ์ให้กับองค์ประกอบ HTML คุณสามารถใช้แอตทริบิวต์ของเหตุการณ์ได้
ตัวอย่าง
กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:
<button onclick="displayDate()">Try it</button>
ในตัวอย่างข้างต้น ฟังก์ชันที่มีชื่อdisplayDate
จะถูกดำเนินการเมื่อมีการคลิกปุ่ม
กำหนดกิจกรรมโดยใช้ HTML DOM
HTML DOM ช่วยให้คุณสามารถกำหนดเหตุการณ์ให้กับองค์ประกอบ HTML โดยใช้ JavaScript:
ตัวอย่าง
กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
ในตัวอย่างข้างต้น ฟังก์ชันที่ตั้งชื่อdisplayDate
ถูกกำหนดให้กับองค์ประกอบ HTML ด้วยนามสกุลid="myBtn"
.
ฟังก์ชั่นจะทำงานเมื่อมีการคลิกปุ่ม
เหตุการณ์ onload และ onunload
เหตุการณ์onload
และ จะถูกท onunload
ริกเกอร์เมื่อผู้ใช้เข้าหรือออกจากหน้า
สามารถใช้ เหตุการณ์onload
เพื่อตรวจสอบประเภทเบราว์เซอร์และเวอร์ชันของเบราว์เซอร์ของผู้เข้าชม และโหลดหน้าเว็บเวอร์ชันที่เหมาะสมตามข้อมูล
สามารถใช้เหตุการณ์และเพื่อจัดการกับคุกกี้onload
ได้onunload
ตัวอย่าง
<body onload="checkCookies()">
เหตุการณ์ onchange
เหตุการณ์onchange
นี้มักใช้ร่วมกับการตรวจสอบความถูกต้องของช่องป้อนข้อมูล
ด้านล่างนี้คือตัวอย่างวิธีการใช้ onchange ฟังก์ชันupperCase()
นี้จะถูกเรียกเมื่อผู้ใช้เปลี่ยนเนื้อหาของช่องป้อนข้อมูล
ตัวอย่าง
<input type="text" id="fname"
onchange="upperCase()">
กิจกรรม onmouseover และ onmouseout
สามารถใช้ เหตุการณ์onmouseover
and onmouseout
เพื่อทริกเกอร์ฟังก์ชันเมื่อผู้ใช้วางเมาส์เหนือหรือออกจากองค์ประกอบ HTML:
onmousedown, onmouseup และ onclick Events
onmousedown
, onmouseup
, และเหตุการณ์onclick
ทั้งหมดเป็นส่วนหนึ่งของการคลิกเมาส์ ขั้นแรกเมื่อมีการคลิกปุ่มเมาส์ เหตุการณ์ onmousedown จะถูกทริกเกอร์ จากนั้นเมื่อปล่อยปุ่มเมาส์ เหตุการณ์ onmouseup จะถูกทริกเกอร์ ในที่สุด เมื่อการคลิกเมาส์เสร็จสิ้น เหตุการณ์ onclick จะถูกทริกเกอร์
ตัวอย่างเพิ่มเติม
เปลี่ยนภาพเมื่อผู้ใช้กดปุ่มเมาส์ค้างไว้
แสดงกล่องแจ้งเตือนเมื่อหน้าโหลดเสร็จ
เปลี่ยนสีพื้นหลังของฟิลด์อินพุตเมื่อได้รับโฟกัส
เปลี่ยนสีขององค์ประกอบเมื่อเคอร์เซอร์เลื่อนไปเหนือองค์ประกอบนั้น
การอ้างอิงวัตถุเหตุการณ์ HTML DOM
สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูที่HTML DOM Event Object Referenceทั้งหมดของเรา