Propagation et Délégation d'Événements

Propagation des Événements

La propagation des événements décrit comment un événement se déplace à travers le DOM après avoir été déclenché, et elle comporte trois phases distinctes : les phases de Capture, de Cible et de Remontée.

Phase de Capture (Capture)

L'événement commence à la racine de l'arbre DOM (window) et descend vers l'élément cible. Les écouteurs d'événements dans cette phase capturent l'événement pendant qu'il descend.

Phase de Cible

L'événement atteint l'élément cible (l'élément qui a déclenché l'événement). C'est ici que les écouteurs d'événements attachés à l'élément cible lui-même sont exécutés.

Phase de Remontée (Bubble)

Après avoir atteint l'élément cible, l'événement commence à remonter l'arbre DOM vers la racine (window), en remontant à travers les éléments parents. C'est la phase la plus couramment utilisée, permettant aux éléments parents de réagir aux événements déclenchés par les éléments enfants.

L'événement se propage à travers le DOM lorsque le button est cliqué. Tout d'abord, l'événement se déclenche sur le button (phase de cible), puis remonte jusqu'au div intérieur et enfin au div extérieur (phase de bouillonnement).

Délégation d'événements

La délégation d'événements est une technique qui exploite la propagation des événements pour gérer les événements des éléments enfants en utilisant un seul écouteur d'événements sur un élément parent. Au lieu d'attacher des écouteurs individuels à chaque enfant, un élément parent écoute les événements qui remontent de ses enfants. Cette approche présente deux avantages principaux :

1. Performance : Réduire le nombre d'écouteurs d'événements améliore les performances, surtout dans les situations où les éléments sont créés dynamiquement (par exemple, une liste qui s'agrandit à mesure que de nouveaux éléments sont ajoutés);
2. Maintenabilité : La délégation d'événements simplifie le code, surtout lorsqu'on travaille avec de grandes structures DOM ou du contenu dynamique.

Au lieu d'ajouter des écouteurs de clic à chaque élément button individuellement, un seul écouteur est ajouté à l'élément parent div. L'événement remonte des éléments button vers le div, où il est géré.

Mauvaise Approche

Bonne Approche

Exemple Pratique : Gestion d'une Liste Dynamique

La délégation d'événements est parfaite pour gérer les interactions dans les listes ou tableaux qui peuvent croître au fil du temps (par exemple, ajouter des tâches à une liste de choses à faire, ou des produits à un panier d'achat). À mesure que des éléments sont ajoutés ou supprimés, le conteneur parent (comme ul ou table) gère toutes les interactions, évitant ainsi le besoin d'attacher ou de retirer des écouteurs à chaque élément enfant.