Javascript จัดเตรียม addEventListener() วิธีที่แนบ ตัวจัดการเหตุการณ์ ไปยังองค์ประกอบที่ระบุ เมธอดนี้แนบตัวจัดการเหตุการณ์กับองค์ประกอบโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่ คุณสามารถเพิ่มตัวจัดการเหตุการณ์หลายตัวลงในองค์ประกอบในแต่ละครั้งได้
addEventListener() วิธีทำให้ง่ายต่อการควบคุมวิธีที่เหตุการณ์ตอบสนองต่อ ฟอง . เราสามารถประยุกต์เหตุการณ์ต่างๆ ได้มากมาย เช่น การเลื่อนเมาส์ การคลิก เป็นต้น
ตัวอย่าง
ในตัวอย่างต่อไปนี้ เมาส์โอเวอร์ เหตุการณ์ได้รับมอบหมาย ดังนั้นเมื่อเราวางเมาส์บนปุ่ม เราจะได้ข้อความที่ร้องขอตามที่แสดงในผลลัพธ์
<html>
<body>
<p>This example uses the addEventListener() method to attach a mouseover event to a button.</p>
<input type = "button" id="myBtn" value = "listener">
<p id="listener"></p>
<script>
document.getElementById("myBtn").addEventListener("mouseover", displayText);
function displayText() {
document.getElementById("listener").innerHTML =
document.write("Tutorix is the best e-learning platform");
}
</script>
</body>
</html> เมื่อเรารันโค้ดข้างต้น เราจะแสดงสิ่งต่อไปนี้บนหน้าจอ
เมื่อเรา วางเมาส์ไว้ บนปุ่ม "ฟัง" จากนั้นเอาต์พุตต่อไปนี้จะถูกดำเนินการ
ผลลัพธ์
