JavaScript Academy · Leçon

Phases de capture et de propagation

Comprenez comment les événements circulent dans le DOM.

Phases de capture et de propagation est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Deux parcours dans le DOM

Lorsque vous cliquez sur un élément, l’événement ne se déclenche pas uniquement sur cet élément. Il parcourt l’arborescence du DOM en deux phases : la phase de capture (du haut vers le bas, de document à la cible) et la phase de propagation (du bas vers le haut, de la cible à document).

<div id="outer">
  <button id="inner">Click</button>
</div>

La propagation par défaut

Par défaut, addEventListener écoute pendant la phase de propagation. Un clic sur le bouton intérieur déclenche d’abord son gestionnaire, puis celui de son parent, puis celui du grand-parent, et ainsi de suite jusqu’à document.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Activer la capture

Transmettez un troisième argument égal à true (ou { capture: true }) pour écouter plutôt pendant la phase de capture. Les gestionnaires de capture s’exécutent du haut vers le bas, avant les gestionnaires de propagation.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

L’ordre complet

Pour un clic sur #inner avec des gestionnaires dans les deux phases, l’ordre est le suivant : phase de capture de haut en bas, puis la cible, puis phase de propagation de bas en haut.

capture de document
capture de l’élément extérieur
élément intérieur (cible)
propagation de l’élément extérieur
propagation de document

event.target ou event.currentTarget

event.target est l’élément qui a réellement déclenché l’événement, c’est-à-dire l’endroit où le clic s’est produit. event.currentTarget est l’élément dont l’écouteur est en cours d’exécution. Dans un gestionnaire attaché à un parent et utilisant la propagation, ces deux éléments sont différents.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Arrêter la propagation

event.stopPropagation() interrompt le parcours : l’événement ne continue pas vers l’élément suivant de la phase actuelle. Les gestionnaires des éléments parents situés plus haut dans l’arborescence ne s’exécutent jamais.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() permet toujours aux autres écouteurs du même élément de s’exécuter. Pour bloquer également les écouteurs frères sur le même élément, utilisez event.stopImmediatePropagation().

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault est différent

Ne confondez pas preventDefault() et stopPropagation(). preventDefault() annule l’action par défaut du navigateur (suivre un lien, envoyer un formulaire), mais n’empêche pas la propagation ascendante de l’événement.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Pourquoi la capture est rare

La plupart des codes utilisent la propagation ascendante, car cela correspond à l’intuition : l’élément précis réagit d’abord, puis les conteneurs en prennent connaissance. La capture est utile lorsqu’un parent doit intercepter ou refuser un événement avant que ses enfants ne le voient.

Vérifier la phase

event.eventPhase indique quelle phase est active : 1 pour la capture, 2 sur la cible et 3 pour la propagation ascendante. C’est rarement nécessaire, mais cela aide à déboguer les chaînes complexes d’écouteurs.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Tous les événements ne suivent pas la propagation ascendante

La plupart des événements d’interface utilisateur (click, input, keydown) suivent la propagation ascendante. Quelques-uns ne le font pas par défaut, comme focus, blur et mouseenter. Pour ceux-ci, utilisez les variantes avec propagation ascendante (focusin, focusout) ou la phase de capture.

Vérification rapide

Vérifiez votre compréhension des phases des événements.

Récapitulatif

Les événements suivent d’abord la capture (vers le bas), puis la propagation ascendante (vers le haut). Les écouteurs utilisent par défaut la propagation ascendante ; transmettez true pour utiliser la capture. e.target est l’origine, tandis que e.currentTarget est l’élément propriétaire de l’écouteur. Utilisez stopPropagation() pour interrompre le parcours et preventDefault() pour annuler les actions par défaut. Ces deux phases sont à la base de la délégation d’événements.

Questions Fréquemment Posées

La leçon « Phases de capture et de propagation » est-elle gratuite ?

Oui — le texte complet de « Phases de capture et de propagation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Phases de capture et de propagation » ?

Comprenez comment les événements circulent dans le DOM. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Phases de capture et de propagation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy