วิธีการ HTML DOM addEventListener() ใช้เพื่อแนบตัวจัดการเหตุการณ์กับองค์ประกอบที่ระบุ
ต่อไปนี้เป็นไวยากรณ์ -
element.addEventListener(event, function, capture)
ด้านบน พารามิเตอร์ประกอบด้วย −
- เหตุการณ์: ชื่อของเหตุการณ์ จำเป็น
- ฟังก์ชัน: ฟังก์ชั่นการทำงานเมื่อเกิดเหตุการณ์ จำเป็น
- จับภาพ: เหตุการณ์ควรดำเนินการในขั้นตอนการบันทึกหรือไม่ การตรวจสอบนี้และแสดงค่าบูลีน จริงหรือเท็จ
ให้เราดูตัวอย่างการใช้เมธอด DOM addEventListener() -
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
var x = document.getElementById("btn");
x.addEventListener("mouseover", one);
x.addEventListener("click", two);
function one() {
document.getElementById("myid").innerHTML += "Button hovered! "
}
function two() {
document.getElementById("myid").innerHTML += "!!Button Clicked!! "
}
</script>
</body>
</html> ผลลัพธ์
ตอนนี้ ถ้าคุณจะคลิก ข้อความ "ปุ่มที่คลิก" จะปรากฏขึ้น เมื่อวางเมาส์เหนือปุ่ม ข้อความต่อไปนี้จะปรากฏขึ้น:“ปุ่มโฮเวอร์” −
