Tapahtumankäsittelijöiden lisääminen silmukassa JavaScriptissä

Opitaan nyt lisäämään tapahtumankäsittelijöitä elementeihin joukoittain. Oletetaan esimerkiksi, että meillä on kappaleet:

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

Oletetaan myös, että meillä on funktio:

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

Käydään läpi kappaleet silmukassa ja lisätään jokaiselle kappaleelle klikkaustapahtuman käsittelijäksi funktio func:

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

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

Edetään pidemmälle ja tehdään niin, että mihin tahansa kappaleeseen klikattaessa tulostetaan kyseisen kappaleen teksti. On kuitenkin ongelma: kappaleita on useita, mutta käsittelijäfunktio on yksi. Miten erotamme kappaleemme käsittelijäfunktion sisällä?

Tähän auttaa objekti this - funktiota kutsuttaessa tapahtuman hetkellä tämä objekti osoittaa siihen elementtiin, jossa tapahtuma tapahtui. Muokataan funktion func koodia edellä mainitun mukaisesti:

function func() {
	console.log(this.textContent); // tulostetaan kappaleen teksti
}

Annettuna on seuraava funktio:

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

Annettuna ovat myös syötekentät. Tee niin, että kun mikä tahansa syötekenttämme menettää kohdistuksen, suoritetaan yllä oleva funktio.

Annettuna ovat kappaleet numeroilla. Tee niin, että mihin tahansa kappaleeseen klikattaessa sen numero korotetaan toiseen potenssiin.