Propagation des Événements et Délégation Expliquées
Propagation des événements
La propagation des événements décrit la manière dont un événement se déplace à travers le DOM après avoir été déclenché, et comporte trois phases distinctes : les phases de Capture, de Cible et de Bullage.
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 interceptent l'événement lors de sa descente.
Phase 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 sont exécutés.
Phase de bullage (Bubble)
Après avoir atteint l'élément cible, l'événement commence à remonter l'arbre DOM vers la racine (window), en « bullant » à travers les éléments parents. Il s'agit de 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.
index.html
index.css
index.js
L'événement se propage à travers le DOM lorsque le button est cliqué. D'abord, l'événement est déclenché sur le button (phase de cible), puis remonte vers le div interne et enfin vers le div externe (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 à l'aide d'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 :
- Performance : La réduction du nombre d'écouteurs d'événements améliore les performances, en particulier 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) ;
- Maintenabilité : La délégation d'événements simplifie le code, notamment lors de la gestion de structures DOM volumineuses ou de contenu dynamique.
index.html
index.css
index.js
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 traité.
Mauvaise approche
Bonne approche
Exemple pratique : Gestion d'une liste dynamique
La délégation d'événements est idéale pour gérer les interactions dans des listes ou des tableaux susceptibles de s'agrandir au fil du temps (par exemple, l'ajout de tâches à une liste de tâches ou de produits à un panier d'achat). Lorsque des éléments sont ajoutés ou supprimés, le conteneur parent (comme ul ou table) gère toutes les interactions, évitant ainsi d'attacher ou de supprimer des écouteurs à chaque élément enfant.
index.html
index.css
index.js
1. Qu'est-ce que la propagation d'événements ?
2. Dans quelle phase un événement remonte-t-il l'arbre DOM après avoir atteint son élément cible ?
3. Pourquoi la délégation d'événements est-elle utile, notamment avec du contenu dynamique ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain the difference between capturing and bubbling phases in more detail?
How does event delegation work with dynamically added elements?
Can you provide a code example of event delegation in JavaScript?
Awesome!
Completion rate improved to 2.22Propagation des Événements et Délégation Expliquées
Glissez pour afficher le menu
Propagation des événements
La propagation des événements décrit la manière dont un événement se déplace à travers le DOM après avoir été déclenché, et comporte trois phases distinctes : les phases de Capture, de Cible et de Bullage.
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 interceptent l'événement lors de sa descente.
Phase 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 sont exécutés.
Phase de bullage (Bubble)
Après avoir atteint l'élément cible, l'événement commence à remonter l'arbre DOM vers la racine (window), en « bullant » à travers les éléments parents. Il s'agit de 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.
index.html
index.css
index.js
L'événement se propage à travers le DOM lorsque le button est cliqué. D'abord, l'événement est déclenché sur le button (phase de cible), puis remonte vers le div interne et enfin vers le div externe (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 à l'aide d'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 :
- Performance : La réduction du nombre d'écouteurs d'événements améliore les performances, en particulier 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) ;
- Maintenabilité : La délégation d'événements simplifie le code, notamment lors de la gestion de structures DOM volumineuses ou de contenu dynamique.
index.html
index.css
index.js
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 traité.
Mauvaise approche
Bonne approche
Exemple pratique : Gestion d'une liste dynamique
La délégation d'événements est idéale pour gérer les interactions dans des listes ou des tableaux susceptibles de s'agrandir au fil du temps (par exemple, l'ajout de tâches à une liste de tâches ou de produits à un panier d'achat). Lorsque des éléments sont ajoutés ou supprimés, le conteneur parent (comme ul ou table) gère toutes les interactions, évitant ainsi d'attacher ou de supprimer des écouteurs à chaque élément enfant.
index.html
index.css
index.js
1. Qu'est-ce que la propagation d'événements ?
2. Dans quelle phase un événement remonte-t-il l'arbre DOM après avoir atteint son élément cible ?
3. Pourquoi la délégation d'événements est-elle utile, notamment avec du contenu dynamique ?
Merci pour vos commentaires !
