Détacher les gestionnaires d'événements dans une boucle en JavaScript

Supposons maintenant que nous n'ayons pas un seul élément, mais plusieurs. Par exemple, plusieurs paragraphes :

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

Attachons la fonction func en tant que gestionnaire de clic à chacun de ces paragraphes :

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

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

function func() {
	console.log(this.textContent);
}

Modifions maintenant le code pour que chaque paragraphe ne réagisse qu'au premier clic sur lui. Pour cela, lors du clic sur un paragraphe, nous détacherons le gestionnaire qui lui est attaché. Cette détachement concernera spécifiquement ce paragraphe, sans affecter les autres.

Comme vous le savez déjà, l'élément dans lequel l'événement s'est produit peut être obtenu dans la fonction gestionnaire via this. Cela signifie qu'il faut effectuer le détachement du gestionnaire de this, comme ceci :

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // détache le gestionnaire
}

Des paragraphes sont donnés. Lors d'un clic sur l'un des paragraphes, ajoutez un point d'exclamation à sa fin. Faites en sorte que cette ajout ne se produise qu'au premier clic.