0Pricing
jQuery Academy · Leçon

Mise en œuvre d’une délégation d’événements robuste

Apprenez les principes et les avantages de la délégation d’événements avec .on() afin de gérer les événements de plusieurs éléments, y compris ceux ajoutés ultérieurement, à l’aide d’un seul écouteur et d’améliorer les performances.

Mise en œuvre d’une délégation d’événements robuste est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Qu'est-ce que la délégation d'événements ?

Bienvenue dans la délégation d'événements ! Cette technique puissante vous aide à gérer efficacement les événements de vos applications web.

Au lieu d'attacher de nombreux écouteurs d'événements à des éléments individuels, vous attachez un seul écouteur à un élément parent commun. C'est comme avoir un seul « superviseur » qui surveille tous ses « enfants » pour certaines actions.

Liaison directe : une limitation

Lorsque vous liez directement des événements à des éléments à l'aide de .on() ou d'autres méthodes, l'écouteur n'est attaché qu'aux éléments qui existent à cet instant précis. Les nouveaux éléments ajoutés ultérieurement au DOM ne recevront pas automatiquement le gestionnaire d'événements.

Dans l'exemple, essayez de cliquer sur les boutons initiaux. Puis, après un court délai, un nouveau bouton apparaît. Essayez de cliquer sur le nouveau bouton : il ne réagira pas !

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Comprendre la propagation des événements

Pour comprendre la délégation, vous devez connaître la propagation des événements. Lorsqu'un événement (comme un clic) se produit sur un élément, il se déclenche d'abord sur cet élément, puis sur son parent, puis sur le parent de celui-ci, jusqu'au document.

La propriété event.target fait toujours référence à l'élément d'origine qui a déclenché l'événement, quel que soit le parent qui le réceptionne. Essayez de cliquer sur les éléments ci-dessous et observez la sortie de la console.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

.on() de jQuery pour la délégation

La méthode .on() de jQuery peut servir à déléguer des événements si vous lui fournissez un argument selector supplémentaire. Sa syntaxe ressemble à ceci :

  • $(parentSelector).on(event, childSelector, handler);

Ici, l'écouteur d'événements est attaché à parentSelector. Toutefois, la fonction handler ne s'exécute que si l'événement provient d'un élément descendant correspondant à childSelector.

Exemple de délégation d'événements

Appliquons maintenant la délégation d'événements pour résoudre le problème de la scène 2. Nous allons attacher l'écouteur au conteneur parent (#my-list), mais lui demander de ne réagir que si le clic provient d'un élément correspondant à .item.

Remarquez que désormais, lorsque le nouveau bouton apparaît, il réagit aux clics !

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

Gérer les éléments dynamiques

Le principal avantage illustré dans l'exemple précédent est la manière dont la délégation d'événements gère efficacement les éléments ajoutés dynamiquement.

Comme l'écouteur se trouve sur le parent statique, tous les nouveaux enfants correspondant à childSelector seront automatiquement pris en charge par cet unique écouteur. Vous n'avez pas besoin de relier les événements chaque fois que vous ajoutez du contenu !

Améliorer les performances

En plus de gérer le contenu dynamique, la délégation d'événements offre d'importants avantages en matière de performances :

  • Moins d'écouteurs : au lieu d'attacher un écouteur distinct à des centaines d'éléments, vous n'en attachez qu'un seul à leur parent commun.
  • Moins de mémoire : un nombre réduit d'écouteurs signifie que votre application consomme moins de mémoire.
  • Démarrage plus rapide : le navigateur consacre moins de temps à configurer les gestionnaires d'événements lors du chargement de la page.

Quand déléguer les événements

La délégation d'événements est un outil puissant, mais elle n'est pas toujours nécessaire. Voici les situations idéales pour l'utiliser :

  • Lorsque vous manipulez un grand nombre d'éléments similaires (par exemple, les éléments d'une longue liste ou les lignes d'un tableau).
  • Lorsque des éléments sont ajoutés ou supprimés dynamiquement du DOM après le chargement initial de la page.
  • Lorsque les performances constituent une priorité pour la gestion des événements.

Bonnes pratiques de délégation

Pour tirer le meilleur parti de la délégation d'événements, suivez ces bonnes pratiques :

  • Choisissez le parent statique le plus proche : déléguez au plus proche ancêtre dont l'existence est garantie lors du chargement de la page. Évitez de déléguer à document ou à body si un parent plus proche convient.
  • Comprenez $(this) : dans un gestionnaire délégué, $(this) fait référence à l'élément d'origine correspondant à childSelector, et non à l'élément parent auquel l'écouteur est attaché.
  • Faites attention à la propagation : bien qu'elle soit utile pour la délégation, la propagation peut parfois entraîner des effets secondaires indésirables si elle n'est pas maîtrisée (par exemple avec event.stopPropagation(), abordé dans une autre leçon).

Testez vos connaissances

Dans lesquels des scénarios suivants la délégation d’événements est-elle idéale ?

Récapitulatif de la délégation d’événements

Excellent travail ! Vous avez appris les principes fondamentaux de la délégation d’événements dans jQuery.

Nous avons vu comment .on() associé à un childSelector permet à un seul écouteur parent de gérer les événements de plusieurs enfants, y compris ceux qui sont ajoutés dynamiquement. Cette technique est essentielle pour améliorer les performances, simplifier le code et gérer efficacement le contenu dynamique dans vos applications jQuery.

Maîtriser la délégation rendra votre gestion des événements robuste et évolutive !

Questions Fréquemment Posées

La leçon « Mise en œuvre d’une délégation d’événements robuste » est-elle gratuite ?

Oui — le texte complet de « Mise en œuvre d’une délégation d’événements robuste » 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 « Mise en œuvre d’une délégation d’événements robuste » ?

Apprenez les principes et les avantages de la délégation d’événements avec .on() afin de gérer les événements de plusieurs éléments, y compris ceux ajoutés ultérieurement, à l’aide d’un seul écouteur… 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 1 sur 3.

Combien de temps prend la leçon « Mise en œuvre d’une délégation d’événements robuste » ?

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