Menyahlangkan Pengendali Peristiwa dalam Gelung di JavaScript

Sekarang andaikan kita bukan mempunyai satu elemen, tetapi beberapa. Sebagai contoh, beberapa perenggan:

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

Mari kita ikat fungsi func sebagai pengendali klik kepada setiap perenggan ini:

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

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

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

Sekarang mari kita ubah suai kod tersebut supaya setiap perenggan hanya bertindak balas terhadap tekanan pertama padanya. Untuk melakukan ini, apabila perenggan diklik, kita akan menyahlangkan pengendali yang terikat daripadanya. Penyahlangan ini akan khusus untuk perenggan ini, tanpa menjejaskan yang lain.

Seperti yang anda sudah tahu, elemen di mana peristiwa berlaku boleh diperoleh dalam fungsi pengendali melalui this. Ini bermakna kita perlu melaksanakan penyahlangan pengendali daripada this, seperti ini:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // menyahlangkan pengendali
}

Diberikan beberapa perenggan. Apabila mana-mana perenggan ditekan, tambahkan tanda seru pada penghujungnya. Pastikan penambahan ini hanya berlaku pada tekanan pertama.