0Pricing
jQuery Academy · Leçon

Arrêt de la propagation des événements

Comprenez .stopPropagation() et .preventDefault() pour contrôler le flux des événements, empêcher les actions par défaut du navigateur et gérer efficacement les interactions complexes entre événements.

Arrêt de la propagation des événements est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Contrôlez vos événements !

Les événements tels que les clics ou les envois de formulaires ne se produisent pas uniquement sur un élément. Ils circulent souvent à travers le Document Object Model (DOM).

Apprendre à contrôler ce flux est essentiel pour créer des pages web précises et interactives.

Empêcher les actions par défaut

Les navigateurs définissent des actions par défaut pour de nombreux éléments HTML. Par exemple :

  • Cliquer sur une balise <a> permet d’accéder à une nouvelle page.
  • Envoyer un <form> recharge la page.

Nous utilisons event.preventDefault() pour empêcher ces comportements intégrés au navigateur.

`preventDefault()` en action

Essayez de cliquer sur le lien ci-dessous. Normalement, il vous redirigerait vers example.com, mais .preventDefault() empêche cette navigation !

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

Comprendre la propagation des événements

Lorsqu’un événement se produit sur un élément, par exemple lors d’un clic, il ne déclenche pas uniquement les gestionnaires de cet élément. Il « remonte » dans l’arborescence du DOM.

  • Il déclenche les gestionnaires de son parent.
  • Puis ceux de son grand-parent.
  • Et ainsi de suite, jusqu’à <body> et <html>.

Ce déplacement vers le haut est appelé propagation des événements.

Arrêter la propagation&nbsp;: `stopPropagation()`

Parfois, vous souhaitez qu’un événement soit géré uniquement par l’élément à l’origine de son déclenchement, ou par un parent précis, sans affecter les éléments de niveau supérieur.

C’est là qu’intervient event.stopPropagation(). Cette méthode empêche l’événement de continuer à remonter dans l’arborescence du DOM.

Exemple de `stopPropagation()`

Cliquez sur la boîte intérieure. Sans stopPropagation(), les deux messages apparaîtraient. Avec cette méthode, seul le message de la boîte intérieure apparaît, car la propagation est interrompue.

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

Utilisations pratiques de l’arrêt de la propagation

stopPropagation() est utile dans des situations telles que :

  • Boîtes de dialogue modales : empêcher les clics à l’intérieur d’une fenêtre modale de la fermer en déclenchant un clic sur la superposition.
  • Menus déroulants imbriqués : garder ouvert un menu déroulant enfant lorsque son parent est cliqué.
  • Composants d’interface complexes : veiller à ce que les gestionnaires d’événements de composants précis n’interfèrent pas avec les écouteurs globaux.

L’objet événement

.preventDefault() et .stopPropagation() sont toutes deux des méthodes de l’objet événement. Cet objet est transmis comme argument à votre fonction de gestion d’événement.

L’objet événement contient de nombreuses informations utiles sur l’événement qui s’est produit, comme son type, l’élément cible et les coordonnées de la souris.

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

Combiner les deux méthodes

Parfois, vous devez utiliser à la fois .preventDefault() et .stopPropagation(). Ces méthodes résolvent des problèmes différents :

  • .preventDefault() : empêche l’action par défaut du navigateur.
  • .stopPropagation() : empêche l’événement de remonter dans le DOM.

Par exemple, un bouton situé dans un composant complexe peut devoir empêcher son comportement de clic par défaut ET empêcher le clic de déclencher les gestionnaires des parents.

Comprendre le contrôle des événements

Vous avez un lien <a href="#" id="link"> à l’intérieur d’une div <div id="container">. Vous souhaitez empêcher le lien de naviguer et également empêcher l’événement de clic de déclencher un gestionnaire sur #container.

Récapitulatif&nbsp;: contrôle des événements

Excellent travail ! Vous avez appris à maîtriser le flux des événements :

  • .preventDefault() : empêche l’action par défaut du navigateur pour un événement, par exemple la navigation d’un lien ou l’envoi d’un formulaire.
  • .stopPropagation() : empêche un événement de remonter dans l’arborescence du DOM jusqu’aux éléments parents.

Ces méthodes puissantes vous donnent un contrôle précis sur le comportement des événements dans vos applications web, pour une expérience utilisateur plus prévisible et plus robuste.

Questions Fréquemment Posées

La leçon « Arrêt de la propagation des événements » est-elle gratuite ?

Oui — le texte complet de « Arrêt de la propagation des événements » 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 jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Arrêt de la propagation des événements » ?

Comprenez .stopPropagation() et .preventDefault() pour contrôler le flux des événements, empêcher les actions par défaut du navigateur et gérer efficacement les interactions complexes entre événement… Tu pratiques jQuery 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 jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery 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 2 sur 3.

Combien de temps prend la leçon « Arrêt de la propagation des événements » ?

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 jQuery Academy ?

Oui. Chaque leçon jQuery 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

  1. Mise en œuvre d’une délégation d’événements robuste
  2. Arrêt de la propagation des événements
  3. Création et déclenchement d’événements personnalisés
← Retour à jQuery Academy