Hủy liên kết trình xử lý sự kiện trong vòng lặp trong JavaScript

Bây giờ giả sử chúng ta không có một phần tử, mà có nhiều phần tử. Ví dụ, nhiều đoạn văn:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Hãy gắn hàm func làm trình xử lý sự kiện click cho mỗi đoạn văn trong số này:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

Bây giờ hãy sửa đổi mã sao cho mỗi đoạn văn chỉ phản ứng với lần nhấp đầu tiên vào nó. Để làm điều này, khi nhấp vào một đoạn văn, chúng ta sẽ hủy liên kết trình xử lý đã gắn vào nó. Việc hủy liên kết này sẽ chỉ áp dụng cho chính đoạn văn đó, không ảnh hưởng đến các đoạn văn khác.

Như bạn đã biết, phần tử nơi sự kiện xảy ra có thể nhận được trong hàm xử lý thông qua this. Điều này có nghĩa là cần thực hiện hủy liên kết trình xử lý khỏi this, như sau:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // hủy liên kết trình xử lý
}

Cho các đoạn văn. Khi nhấp vào bất kỳ đoạn văn nào, hãy thêm dấu chấm than vào cuối nó. Hãy đảm bảo rằng việc thêm này chỉ xảy ra vào lần nhấp đầu tiên.