HTML DOM ช่วยให้จาวาสคริปต์ในการตอบสนองต่อเหตุการณ์ HTML:
ทำปฏิกิริยากับเหตุการณ์
จาวาสคริปต์ที่สามารถดำเนินการเมื่อมีเหตุการณ์เกิดขึ้นเช่นเมื่อผู้ใช้คลิกที่องค์ประกอบ 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 จะได้รับการดำเนินการเมื่อมีการคลิกปุ่ม
กำหนดกิจกรรมการใช้ DOM แบบ HTML
ใช้ HTML DOM ช่วยให้คุณสามารถกำหนดกิจกรรมเพื่อองค์ประกอบ HTML โดยใช้ JavaScript:
ตัวอย่าง
กำหนดเหตุการณ์ onclick กับองค์ประกอบปุ่ม
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
ลองตัวเอง» ในตัวอย่างข้างต้นเป็นฟังก์ชั่นชื่อ displayDate ได้รับมอบหมายให้องค์ประกอบ HTML กับ id="myBtn"
ฟังก์ชั่นจะได้รับการดำเนินการเมื่อมีการคลิกปุ่ม
onload และ onunload เหตุการณ์
onload และ onunload เหตุการณ์จะถูกเรียกเมื่อผู้ใช้เข้าหรือออกจากหน้า
onload เหตุการณ์สามารถนำมาใช้ในการตรวจสอบของผู้เข้าชมประเภทเบราว์เซอร์และเบราว์เซอร์รุ่นและโหลดรุ่นที่ถูกต้องของหน้าเว็บบนพื้นฐานของข้อมูล
onload และ onunload เหตุการณ์สามารถนำมาใช้ในการจัดการกับคุกกี้
onchange เหตุการณ์
onchange เหตุการณ์มักจะใช้ร่วมกับการตรวจสอบของช่องใส่
ด้านล่างเป็นตัวอย่างของวิธีการใช้ที่ onchange upperCase() ฟังก์ชั่นจะถูกเรียกว่าเมื่อผู้ใช้มีการเปลี่ยนแปลงเนื้อหาของช่องใส่นั้น
onmouseover และ onmouseout เหตุการณ์
onmouseover และ onmouseout เหตุการณ์สามารถนำมาใช้ในการเรียกฟังก์ชั่นเมื่อผู้ใช้ mouses มากกว่าหรือออกจากองค์ประกอบ HTML นี้:
onmousedown , onmouseup และ onclick เหตุการณ์
onmousedown , onmouseup และ onclick เหตุการณ์ทุกส่วนของเมาส์คลิก ครั้งแรกเมื่อปุ่มเมาส์คลิกที่ onmousedown เหตุการณ์จะถูกเรียกแล้วเมื่อปุ่มเมาส์จะถูกปล่อยออกที่ onmouseup เหตุการณ์จะถูกเรียกในที่สุดเมื่อมีการคลิกเมาส์เสร็จสมบูรณ์ onclick เหตุการณ์จะถูกเรียก
ตัวอย่างเพิ่มเติม
onmousedown และ onmouseup
เปลี่ยนภาพเมื่อผู้ใช้ถือปุ่มเมาส์
onload
แสดงกล่องแจ้งเตือนเมื่อหน้าได้เสร็จสิ้นการโหลด
onfocus
เปลี่ยนสีพื้นหลังของช่องใส่เมื่อได้รับโฟกัส
เหตุการณ์ของเมาส์
เปลี่ยนสีขององค์ประกอบเมื่อเคอร์เซอร์เลื่อนมากกว่านั้น
อ้างอิงวัตถุ HTML DOM เหตุการณ์
สำหรับรายชื่อของกิจกรรมทั้งหมดของ HTML DOM ให้ดูที่ของเราสมบูรณ์ HTML DOM เหตุการณ์อ้างอิงวัตถุ
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »