วิธีลบ Event Handler ใน JavaScript

JavaScript มีเมธอด removeEventListener() สำหรับลบ event handler ที่ผูกไว้ด้วย addEventListener()

ตัวอย่าง

<html> <body> 
    <h3 id="add">Hover me </h3> 
    <p id="remove"> </p> 
    <h3>Click this button to stop hovering effect </h3> 
    <input type="button" id="clickIt" onclick="RespondClick()" value="remove"> 
    <script> 
        const listener = document.getElementById("add"); 
        listener.addEventListener("mouseover", RespondMouseOver); 
        function RespondMouseOver() { 
            document.getElementById("remove").innerHTML += 1 + "<br>"; 
        } 
        function RespondClick() { 
            listener.removeEventListener("mouseover", RespondMouseOver); 
            document.getElementById("remove").innerHTML += 0; 
        } 
    </script> </body> </html>

การทำงาน

เมื่อ hover ที่ข้อความ "Hover me" จะแสดงตัวเลข 1 ทุกครั้ง เมื่อกดปุ่ม "remove" จะเรียก removeEventListener() ทำให้ event handler หยุดทำงาน ไม่มี 1 เพิ่มขึ้นอีก