Cách xóa trình xử lý sự kiện (event handlers) trong JavaScript

JavaScript cung cấp phương thức removeEventListener() để xóa trình xử lý sự kiện (event handlers). Một sự kiện được xử lý qua phương thức addEventListener(). Phương thức removeEventListener() xóa các trình xử lý sự kiện đã được gắn bằng addEventListener().

Ví dụ

<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>

Khi thực thi mã trên, màn hình hiển thị như sau:

Khi di chuột qua văn bản "Hover me", số 1 sẽ xuất hiện. Số lần di chuột, số lần 1 xuất hiện. Di chuột 4 lần cho kết quả:

Kết quả

Để dừng trình xử lý sự kiện, nhấn nút "remove". Sau khi nhấn, số 0 hiển thị và sau đó di chuột không còn sinh ra số 1 nữa như hình minh họa.