Sündmuste käitlejate lahtiseostamine tsüklis JavaScriptis

Olgu nüüd meil mitte üks element, vaid mitu. Näiteks mitu lõiku:

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

Seostame iga selle lõiguga kliki käitlejana funktsiooni func:

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

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

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

Muudame nüüd koodi nii, et iga lõik reageeriks ainult esimesele vajutusele sellele. Selleks lõigu peale klõpsates seostame sellest lahti sellele seotud käitleja. Samal ajal toimub lahtiseostamine konkreetselt selle lõigu puhul, teisi puudutamata.

Nagu te juba teate, elementi, milles sündmus toimus, saab käitlejafunktsioonis kätte läbi this. See tähendab, et tuleb käivitada käitleja lahtiseostamine this-ist, niimoodi:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // seostame käitleja lahti
}

Antud on lõigud. Iga lõigu peale vajutamisel lisage selle lõppu hüüumärk. Tehke nii, et see lisamine toimuks ainult esimesel vajutusel.