Phương thức removeEventListener() trong HTML DOM

Phương thức removeEventListener() trong HTML DOM loại bỏ một trình xử lý sự kiện (event handler) từ một phần tử HTML trong tài liệu HTML.

Cú pháp

element.removeEventListener(event, function, useCapture);

Ở đây, event là tên sự kiện, function chỉ định hàm cần loại bỏ, và useCapture nhận giá trị true hoặc false.

true đại diện cho loại bỏ trình xử lý từ giai đoạn capturing, false đại diện cho loại bỏ từ giai đoạn bubbling.

Ví dụ

Ví dụ sử dụng phương thức removeEventListener():

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-size: 1.2rem; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .mycolor { background-color: #db133a; }
</style>
</head>
<body>
<h1>Demo phương thức removeEventListener() DOM</h1>
<button class="btn hover-btn">Di chuột qua tôi</button>
<button onclick="remove()" class="btn">Loại bỏ trình xử lý sự kiện</button>
<script>
  var hoverBtn = document.querySelector('.hover-btn');
  function toggleFun() {
    hoverBtn.classList.toggle("mycolor");
  }
  hoverBtn.addEventListener('mouseover', toggleFun);
  function remove() {
    hoverBtn.removeEventListener('mouseover', toggleFun);
  }
</script>
</body>
</html>

Kết quả

Di chuột qua nút Di chuột qua tôi để quan sát thay đổi, sau đó nhấn nút Loại bỏ trình xử lý sự kiện để loại bỏ trình xử lý sự kiện khỏi nút đó. Lúc này di chuột qua sẽ không còn tác dụng.