Maîtriser le bouillonnement et la capture d'événements en JavaScript

Bullage et capture d'événements en JavaScript

La propagation des événements en JavaScript décrit la manière dont les événements traversent le DOM après avoir été déclenchés. Il y a deux phases principales : Event Bubbling et Event Capture. Comprendre ces concepts est crucial pour gérer efficacement les auditeurs d'événements.

---

1. Phases de propagation de l'événement

Lorsqu'un événement est déclenché, il se propage à travers le DOM dans l'ordre suivant :

1. Phase de capture : L'événement se déplace de la racine de l'arborescence DOM jusqu'à l'élément cible.
2. Phase cible : L'événement atteint l'élément cible.
3. Phase de bouillonnement : L'événement se déplace de l'élément cible jusqu'à la racine.

---

2. Événement bouillonnant

Dans la phase de bouillonnement, l'événement commence au niveau de l'élément cible et remonte jusqu'à ses ancêtres.

Exemple :

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Sortie en cliquant sur le bouton :

Child clicked
Parent clicked

• L'événement bouillonne du bouton au div.

Arrêter les bulles

Utilisez la méthode stopPropagation() pour empêcher l'événement de se propager davantage.

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

3. Capture d'événement (trickling)

Dans la phase de capture, l'événement se déplace de la racine de l'arborescence DOM jusqu'à l'élément cible.

Exemple :

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

Sortie en cliquant sur le bouton :

Parent clicked
Child clicked

• L'événement est capturé par le parent avant d'atteindre l'enfant.

---

4. Comparaison du bouillonnement et de la capture

Fonctionnalité Événement bouillonnant Capture d'événements ête>

Feature	Event Bubbling	Event Capturing
Order	From target to ancestors	From root to target
Default Behavior	Enabled	Disabled unless specified
Use Case	Commonly used for delegation	Less commonly used

Commander De la cible aux ancêtres De la racine à la cible Comportement par défaut Activé Désactivé sauf indication contraire Cas d'utilisation Couramment utilisé pour la délégation Moins couramment utilisé

---

5. Délégation événementielle

La délégation d'événements profite du bouillonnement d'événements pour gérer efficacement les événements de plusieurs éléments enfants.

Exemple :

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• Un seul écouteur d'événement sur ul gère les clics pour tous les éléments li.

---

6. Prévenir les comportements par défaut

Utilisez la méthode PreventDefault() pour arrêter le comportement par défaut d'un élément sans affecter la propagation.

Exemple :

Child clicked
Parent clicked

---

7. Cas d'utilisation pratique : validation de formulaire

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

8. Résumé

• Le bouillonnement d'événements propage les événements de l'élément cible vers le haut jusqu'aux ancêtres.
• La capture d'événements propage les événements de la racine vers le bas jusqu'à l'élément cible.
• Utilisez stopPropagation() pour arrêter la propagation et PreventDefault() pour annuler les actions par défaut.
• La délégation d'événements est une technique puissante pour gérer efficacement des événements sur des éléments dynamiques.

La maîtrise du bouillonnement et de la capture d'événements garantit un meilleur contrôle sur les applications basées sur les événements et améliore l'efficacité du code.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!