Délégation d'événements en JavaScript

Dans la leçon précédente, le problème qui survient lors de l'ajout de nouveaux éléments a été décrit, et sa solution a été présentée. Dans cette leçon, nous allons examiner une meilleure façon de contourner le problème - la délégation d'événements. Analysons-la.

Comme vous le savez déjà, en cliquant sur un li, nous cliquons simultanément sur la ul. Ceci est possible grâce à la remontée des événements. Nous pouvons utiliser cela pour résoudre notre tâche : attachons l'événement non pas à chaque li, mais à leur parent ul :

list.addEventListener('click', function() {
	
});

Maintenant, dans le gestionnaire d'événements, this pointera vers l'élément auquel le gestionnaire est lié, et event.target pointera vers l'élément dans lequel l'événement s'est produit :

list.addEventListener('click', function(event) {
	console.log(this);         // notre liste
	console.log(event.target); // l'élément de liste
});

Faisons en sorte que le li sur lequel le clic a eu lieu ajoute un point d'exclamation à la fin :

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Répétez la solution présentée. Assurez-vous que les nouveaux li réagiront également au clic.