Cách làm việc với phương thức removeEventListener() trong JavaScript

Phương thức removeEventListener() dùng để gỡ bỏ trình xử lý sự kiện (event handler) đã được gắn bằng addEventListener(). Điều này giúp tránh rò rỉ bộ nhớ và kiểm soát hành vi sự kiện chính xác.

Ví dụ minh họa

Di chuột qua hộp xám để thấy số ngẫu nhiên. Nhấn "Gỡ bỏ" để dừng sự kiện:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      background-color: gray;
      border: 2px dashed;
      padding: 20px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div id="box">
    Văn bản demo!
    <p>Nhấn nút bên dưới để gỡ bỏ trình xử lý sự kiện.</p>
    <button onclick="removeEvent()" id="btnid">Gỡ bỏ</button>
  </div>
  <p id="pid"></p>
  <script>
    document.getElementById("box").addEventListener("mousemove", display);
    function display() {
      document.getElementById("pid").innerHTML = Math.random();
    }
    function removeEvent() {
      document.getElementById("box").removeEventListener("mousemove", display);
    }
  </script>
</body>
</html>

Điều kiện bắt buộc để gỡ bỏ thành công

• Hàm xử lý sự kiện phải là cùng một tham chiếu hàm (không phải hàm ẩn danh mới tạo).
• Tham số useCapture (nếu có) phải khớp với lúc đăng ký.
• Phần tử mục tiêu phải giống hệt nhau.