Sündmuste lisamine tsüklis JavaScriptis

Õpime nüüd, kuidas lisada elementidele sündmuste töötlejaid hulgi. Oletame näiteks, et meil on lõigud:

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

Oletame, et meil on ka funktsioon:

function func() {
	console.log('!');
}

Läbime oma lõigud tsüklis ja lisame igale lõigule klikk sündmuse töötlejana funktsiooni func:

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

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

Lähme edasi ja teeme nii, et mis tahes lõigu peale klõpsates kuvataks selle lõigu tekst. Siiski on probleem: lõike on palju, kuid töötleja funktsioon on üks. Kuidas me saame oma lõike töötleja funktsiooni sees eristada?

Selles aitab meil objekt this - kui funktsiooni kutsutakse sündmuse toimumise hetkel, siis see objekt viitab sellele elemendile, kus see sündmus toimus. Muudame oma funktsiooni func koodi vastavalt öeldule:

function func() {
	console.log(this.textContent); // kuvame lõigu teksti
}

Antud on järgmine funktsioon:

function func() {
	this.value = Number(this.value) + 1;
}

Samuti on antud input väljad. Tehke nii, et kui mis tahes meie input väljal kaob fookus, käivitataks ülal toodud funktsioon.

Antud on lõigud numbritega. Tehke nii, et mis tahes lõigu peale klõpsates ruudustatakse selles olev number.