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:

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

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

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

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

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

Cho một liên kết và một nút bấm. Khi nhấn vào nút bấm, hãy thêm vào cuối văn bản của liên kết nội dung của thuộc tính href của nó trong ngoặc đơn. Hãy làm sao để việc thêm này chỉ xảy ra ở lần nhấn đầu tiên.

Cho một nút bấm, có giá trị là một số 1. Hãy làm sao để mỗi lần nhấp vào nút bấm này, giá trị của nó tăng lên một đơn vị. Sau khi giá trị của nút bấm đạt 10 - hãy hủy liên kết trình xử lý sự kiện, để nút bấm không còn phản ứng với việc nhấn nữa.