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