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

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

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

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

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

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

javascriptlet 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:

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

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