JavaScript Academy · Leçon

preventDefault et stopPropagation

Contrôlez le comportement par défaut et la propagation ascendante.

preventDefault et stopPropagation est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Contrôler le comportement des événements

Deux mécanismes vous permettent de contrôler les événements : interrompre l’action par défaut du navigateur et empêcher l’événement de circuler dans le DOM.

Actions par défaut

De nombreux éléments possèdent des comportements par défaut intégrés : les liens lancent une navigation, l’envoi d’un formulaire recharge la page et les cases à cocher changent d’état. Ces actions se produisent sauf si vous intervenez.

preventDefault

event.preventDefault annule l’action par défaut du navigateur tout en permettant à votre gestionnaire de s’exécuter.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault sur les formulaires

Une utilisation courante consiste à empêcher un formulaire de recharger la page afin que vous puissiez traiter son envoi avec JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Propagation des événements

Après avoir atteint la cible, les événements remontent dans les ancêtres, en déclenchant leurs écouteurs. C’est pourquoi un clic sur un enfant peut exécuter le gestionnaire de son parent.

stopPropagation

event.stopPropagation empêche l’événement de continuer vers les ancêtres. Le gestionnaire actuel termine tout de même son exécution.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault et stopPropagation

Ces deux mécanismes sont indépendants. preventDefault annule l’action du navigateur ; stopPropagation empêche la propagation vers les autres éléments. Vous pouvez utiliser l’un, l’autre, les deux ou aucun.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Autres écouteurs sur le même élément

stopPropagation n’empêche PAS l’exécution des autres écouteurs attachés au même élément. Ils se déclenchent tout de même.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation va plus loin : il arrête la propagation et empêche également les autres écouteurs du même élément de s’exécuter.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Vous pouvez vérifier event.defaultPrevented pour savoir si preventDefault a déjà été appelé par un gestionnaire précédent.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

À utiliser avec modération

Arrêter la propagation peut perturber la délégation d’événements ailleurs sur la page. Ne le faites que lorsque c’est réellement nécessaire et envisagez des solutions compatibles avec la délégation.

Vérification rapide

Choisissez la bonne méthode.

Récapitulatif

preventDefault annule l’action par défaut du navigateur (navigation, envoi, etc.). stopPropagation empêche l’événement de remonter jusqu’aux ancêtres, tandis que stopImmediatePropagation bloque également les autres écouteurs du même élément. Ces outils sont indépendants ; utilisez l’arrêt de la propagation avec modération pour éviter de perturber la délégation.

Questions Fréquemment Posées

La leçon « preventDefault et stopPropagation » est-elle gratuite ?

Oui — le texte complet de « preventDefault et stopPropagation » 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 « preventDefault et stopPropagation » ?

Contrôlez le comportement par défaut et la propagation ascendante. 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 3 sur 4.

Combien de temps prend la leçon « preventDefault et stopPropagation » ?

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