JavaScript โต้ตอบกับ HTML ผ่านเหตุการณ์ (events) ที่เกิดขึ้นเมื่อผู้ใช้หรือเบราว์เซอร์จัดการกับหน้าเว็บ
เหตุการณ์ (Events) คืออะไร?
เมื่อหน้าเว็บโหลดเสร็จ เรียกว่าเหตุการณ์หนึ่ง เมื่อผู้ใช้คลิกปุ่ม การคลิกก็เป็นเหตุการณ์เช่นกัน ตัวอย่างอื่นๆ ได้แก่ การกดปุ่มคีย์บอร์ด การปิดหน้าต่าง การปรับขนาดหน้าต่าง เป็นต้น
ตัวอย่างเหตุการณ์ทั่วไป
เหตุการณ์ onclick
เป็นเหตุการณ์ที่ใช้บ่อยที่สุด เกิดขึ้นเมื่อผู้ใช้คลิกปุ่มเมาส์ซ้าย สามารถนำไปใช้กับการตรวจสอบข้อมูล (validation) การแสดงคำเตือน ฯลฯ
ตัวอย่างโค้ด
<html>
<head>
<script>
function sayHello() {
alert("Hello World");
}
</script>
</head>
<body>
<p>คลิกปุ่มด้านล่างเพื่อดูผลลัพธ์</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
เหตุการณ์ onmouseover และ onmouseout
เหตุการณ์ทั้งสองนี้ช่วยสร้างเอฟเฟกต์ที่น่าสนใจกับรูปภาพหรือข้อความ onmouseover จะทำงานเมื่อเลื่อนเมาส์เข้าสู่องค์ประกอบ ส่วน onmouseout จะทำงานเมื่อเลื่อนเมาส์ออกจากองค์ประกอบนั้น
ตัวอย่างโค้ด
<html>
<head>
<script>
function over() {
document.write("Mouse Over");
}
function out() {
document.write("Mouse Out");
}
</script>
</head>
<body>
<p>เลื่อนเมาส์เข้ามาในพื้นที่ div เพื่อดูผลลัพธ์:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
