Hủy liên kết sự kiện trong JavaScript

Trong bài học này, chúng ta sẽ học cách hủy liên kết các trình xử lý sự kiện đã được liên kết trước đó với các phần tử. Giả sử ví dụ có nút bấm sau:

html<input id="button" type="submit">

Hãy liên kết hàm func với nút bấm này:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

Bây giờ hãy làm sao để trình xử lý sự kiện kích hoạt ở lần nhấp đầu tiên, sau đó ngừng liên kết với nút bấm. Để làm điều này tồn tại một phương thức đặc biệt removeEventListener. Phương thức này nhận tham số đầu tiên là kiểu sự kiện, và tham số thứ hai là tham chiếu đến hàm cần hủy liên kết.

Thông thường, điều này có nghĩa là trình xử lý sự kiện được hủy liên kết giống như cách nó được liên kết. Tức là, nếu chúng ta liên kết nó như thế này: addEventListener('click', func), thì chúng ta cũng sẽ hủy liên kết với các tham số tương tự, như thế này: removeEventListener('click', func).

Vậy, hãy giải quyết nhiệm vụ chúng ta đặt ra:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}