Ontkoppeling van gebeurtenishanteerders in 'n lus in JavaScript

Kom ons sê ons het nou nie een element nie, maar verskeie. Byvoorbeeld, verskeie paragrawe:

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

Laat ons aan elkeen van hierdie paragrawe met 'n klikhanteerder die funksie func koppel:

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

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

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

Laat ons nou die kode omskep sodat elke paragraaf slegs op die eerste klik daarop reageer. Om dit te doen, sal ons by 'n klik op die paragraaf die gekoppelde hanteerder daarvan ontkoppel. Die ontkoppeling sal spesifiek van hierdie paragraaf wees, en die ander glad nie raak nie.

Soos jy reeds weet, kan die element waarin die gebeurtenis plaasgevind het, in die hanteerderfunksie deur this verkry word. Dit beteken dat die ontkoppeling van die hanteerder van this uitgevoer moet word, soos hier:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // ontkoppel die hanteerder
}

Paragrawe word gegee. By 'n klik op enige van die paragrawe voeg 'n uitroepteken aan die einde daarvan by. Sorg dat hierdie byvoeging slegs by die eerste klik plaasvind.