คุณสามารถเรียกใช้ JavaScript เมื่อเกิดเหตุการณ์ เช่น ผู้ใช้คลิกเมาส์ การโหลดรูปภาพ เมื่อผู้ใช้คลิกที่องค์ประกอบ HTML การส่งแบบฟอร์ม HTML เป็นต้น ส่วนหนึ่งของ Document Object Model (DOM) ระดับ 3 และองค์ประกอบ HTML ทุกรายการมีชุดของเหตุการณ์ ซึ่งสามารถทริกเกอร์โค้ด JavaScript
ตัวอย่าง
มาดูตัวอย่างกัน ซึ่งให้คุณเรียกใช้ฟังก์ชันจากตัวจัดการเหตุการณ์เพื่อเปลี่ยนข้อความ
สาธิตสด
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html> ต่อไปนี้ เราจะเห็นตัวอย่างบางส่วนเพื่อทำความเข้าใจความสัมพันธ์ระหว่างเหตุการณ์และ JavaScript
onclick ประเภทเหตุการณ์
นี่คือประเภทเหตุการณ์ที่ใช้บ่อยที่สุด ซึ่งเกิดขึ้นเมื่อผู้ใช้คลิกปุ่มซ้ายของเมาส์ คุณสามารถใส่การตรวจสอบ คำเตือน ฯลฯ กับเหตุการณ์ประเภทนี้ได้
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้
การสาธิตสด
<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> onmouseover และ 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> 