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 :

javascriptlist.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 :

javascriptlist.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 :

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