วิธีเพิ่ม Event Handler ให้กับอีเลเมนต์ที่ระบุใน JavaScript

JavaScript มีเมธอด addEventListener() สำหรับผูก event handler ให้กับอีเลเมนต์ โดยไม่เขียนทับ handler เดิม สามารถเพิ่มหลาย handler ให้อีเลเมนต์เดียวกันได้ และควบคุม event bubbling ได้ง่ายขึ้น

ตัวอย่าง

<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 = "Tutorix is the best e-learning platform"; 
    } 
</script> </body> </html>

การทำงาน

เมื่อวางเมาส์บนปุ่ม "listener" จะแสดงข้อความ "Tutorix is the best e-learning platform"