Toevoegen van event handlers in een lus in JavaScript

Laten we nu leren hoe we massaal event handlers aan elementen kunnen toevoegen. Stel dat we bijvoorbeeld paragrafen hebben:

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

Stel dat we ook een functie hebben:

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

Laten we onze paragrafen in een lus doorlopen en aan elke paragraaf de functie func toevoegen als click handler:

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

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

Laten we een stap verder gaan en ervoor zorgen dat bij een klik op een willekeurige paragraaf de tekst van die paragraaf wordt weergegeven. Er is echter een probleem: er zijn veel paragrafen, maar slechts één handlerfunctie. Hoe kunnen we onze paragrafen binnen de handlerfunctie onderscheiden?

Het object this helpt ons hierbij - bij het aanroepen van de functie op het moment van de gebeurtenis zal dit object verwijzen naar het element waar de gebeurtenis plaatsvond. Laten we de code van onze functie func aanpassen volgens het bovenstaande:

javascriptfunction func() {
  console.log(this.textContent); // geeft de tekst van de paragraaf weer
}

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