Détacher les fonctions anonymes en JavaScript

Supposons maintenant qu'une fonction anonyme soit attachée à nos paragraphes :

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Supposons que nous voulions détacher cette fonction du paragraphe après un clic sur ce paragraphe. Cependant, nous rencontrons un problème : la fonction n'a pas de nom, ce qui signifie que nous ne pourrons pas y faire référence par ce nom pour la détacher.

Pour résoudre le problème, nous devons donner un nom à la fonction, en la transformant en expression fonctionnelle nommée. Faisons cela :

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

for (let elem of elems) {
	elem.addEventListener('click', function func() { // a donné un nom à la fonction
		console.log(this.textContent);
	});
}

Maintenant, cette fonction peut être détachée à l'intérieur d'elle-même :

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

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		console.log(this.textContent);
		this.removeEventListener('click', func); // détache la fonction
	});
}

Étant donné une liste ul, dans chaque élément de laquelle un nombre est écrit. Faites en sorte qu'au clic sur n'importe quel li, son nombre soit augmenté de un.

Modifiez la tâche précédente pour que chaque li n'augmente sa valeur qu'au premier clic sur elle.

Modifiez la tâche précédente pour que chaque li n'augmente sa valeur que si sa valeur est inférieure à 10.