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 :

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

Supposons que nous ayons également une fonction :

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

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

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

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

La fonction suivante est donnée :

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

Des champs de saisie sont également donnés. Faites en sorte que la perte de focus dans n'importe lequel de nos champs de saisie exécute la fonction ci-dessus.

Des paragraphes avec des nombres sont donnés. Faites en sorte que un clic sur n'importe quel paragraphe élève au carré son nombre.