Gỡ event listener từ bên trong hàm ngoài trong JavaScript

Mô tả

Minh họa cách gỡ bỏ event listener đã đăng ký từ bên trong một hàm khác (outer function) bằng removeEventListener().

Code HTML + JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button id="demo">Press Me</button>
</body>
<script>
  var demoId = document.getElementById('demo');
  demoId.addEventListener('click', function fun() {
    outerFunction(this, fun);
  }, false);

  function outerFunction(self, funct) {
    console.log('outer function is called....');
    self.removeEventListener('click', funct, false);
    console.log("Listener has been removed...");
  }
</script>
</html>

Kết quả

Lần click đầu: log "outer function is called...." và "Listener has been removed...". Các click sau: không phản ứng (listener đã bị gỡ).

Điều kiện quan trọng

removeEventListener cần chính xác function reference đã dùng trong addEventListener. Do đó phải dùng named function (function fun() {...}) chứ không phải anonymous function.

Lưu ý

• Tham số thứ 3 (useCapture) phải giống hệt khi add
• Có thể dùng {once: true} option trong addEventListener để tự động gỡ sau 1 lần