Ajout de gestionnaires dans une boucle en JavaScript

Apprenons maintenant à ajouter en masse des gestionnaires d'événements aux éléments. Supposons, par exemple, que nous ayons des paragraphes :

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

Supposons que nous ayons également une fonction :

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

Parcourons nos paragraphes dans une boucle et ajoutons à chaque paragraphe la fonction func comme gestionnaire de clic :

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

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

Allons plus loin et faisons en sorte que un clic sur n'importe quel paragraphe affiche le texte de ce paragraphe. Il y a, cependant, un problème : il y a plusieurs paragraphes, mais une seule fonction gestionnaire. Comment distinguer nos paragraphes à l'intérieur de la fonction gestionnaire ?

L'objet this nous y aidera - lors de l'appel de la fonction au moment de l'événement, cet objet pointera vers l'élément où cet événement s'est produit. Modifions le code de notre fonction func conformément à ce qui a été dit :

javascriptfunction func() {
  console.log(this.textContent); // affiche le texte du paragraphe
}

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