Une liste peut contenir de nombreux contrôles répétés et de nouvelles lignes peuvent être ajoutées après le chargement de la page. Au lieu d'attacher un écouteur à chaque bouton, écoutez son parent partagé et identifiez le contrôle activé.

list.addEventListener("click", (event) => {
  if (!(event.target instanceof Element)) return;
  const button = event.target.closest("button[data-action]");
  if (!button || !list.contains(button)) return;
  handleAction(button.dataset.action, button.dataset.id);
});

Gardez la vérification de la cible spécifique

  • Utilisez le plus proche pour que les clics sur une icône à l'intérieur d'un bouton atteignent toujours ce bouton.
  • Confirmez que la correspondance appartient à la liste prévue avant d'agir.
  • Conservez les données d’action sur le contrôle propriétaire de l’action.

Ne pas tout déléguer

Un écouteur direct est plus simple pour un petit ensemble de commandes stable ou lorsque chaque élément nécessite une configuration distincte. La délégation est plus utile lorsque les éléments se répètent ou sont créés dynamiquement.

Testez les clics sur le contenu imbriqué, l’activation du clavier et les contrôles en dehors de la liste. Le gestionnaire d'événements doit répondre une fois à l'action prévue et ignorer les clics sans rapport.