JavaScript Academy · Leçon

Schéma de délégation d’événements

Gérez les événements de nombreux enfants depuis un seul écouteur parent.

Schéma de délégation d’événements est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Un seul écouteur pour tout gérer

La délégation d’événements consiste à associer un seul écouteur à un ancêtre commun plutôt que de nombreux écouteurs aux éléments enfants individuels. Comme les événements suivent la propagation ascendante, le parent reçoit les clics de tous ses descendants.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

L’approche naïve

Sans délégation, vous devriez parcourir chaque élément et lui associer un gestionnaire. C’est inefficace : cela consomme davantage de mémoire et ne fonctionne pas pour les éléments ajoutés ultérieurement.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

L’approche déléguée

Associez plutôt un seul écouteur au parent et inspectez event.target pour déterminer quel élément enfant a été cliqué.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Cibler le bon élément

Le clic peut atteindre un élément imbriqué. Utilisez event.target.closest(selector) pour remonter dans l’arbre et trouver l’ancêtre pertinent correspondant à votre sélecteur.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Protéger avec une vérification

Prévoyez toujours le cas où le clic ne correspond à aucun élément. La sortie anticipée if (!item) return; empêche votre gestionnaire de provoquer une erreur lorsque l’utilisateur clique sur une marge intérieure ou un espace vide du conteneur.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Utiliser les attributs de données

Un schéma courant consiste à stocker un identifiant ou une action sur chaque élément au moyen d’un attribut data-*. Le gestionnaire délégué le lit depuis l’élément correspondant.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Distribuer selon l’action

Pour les barres d’outils comportant de nombreux boutons, attribuez à chacun un data-action et sélectionnez le traitement en fonction de sa valeur. Un seul écouteur gère tous les boutons.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Pourquoi cette approche passe à l’échelle

Avec la délégation, une liste de 1000 lignes ne nécessite qu’un seul écouteur au lieu de 1000. Vous utilisez moins de mémoire, la configuration est plus rapide et vous n’avez pas besoin d’une boucle de nettoyage lorsque les lignes changent.

Remarque sur les performances

La délégation a tout de même un léger coût : chaque événement correspondant exécute votre gestionnaire, qui le filtre ensuite. Pour la plupart des applications, ce coût est négligeable par rapport aux économies réalisées, mais évitez d’associer des écouteurs délégués à document pour des événements très fréquents comme mousemove.

Choisir le conteneur

Choisissez l’ancêtre stable le plus proche qui contient toutes les cibles. Déléguer à un conteneur restreint (la liste elle-même) est préférable à une délégation sur document, car moins d’événements sans rapport déclenchent votre gestionnaire.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Combiner avec closest

closest() est au cœur de la délégation. Il renvoie l’élément lui-même s’il correspond, ou l’ancêtre correspondant le plus proche, ou null. Cela permet de déléguer les événements en toute sécurité sur un balisage imbriqué.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Vérification rapide

Pourquoi utiliser la délégation d’événements ?

Récapitulatif

La délégation d’événements associe un seul écouteur à un parent et utilise la propagation ascendante pour gérer tous les éléments enfants. Utilisez e.target.closest(selector) pour trouver l’élément pertinent, protégez votre gestionnaire avec une sortie anticipée et lisez les attributs data-* pour distribuer les actions. Cette approche s’adapte aux très grandes listes et constitue le schéma standard des interfaces utilisateur dynamiques.

Questions Fréquemment Posées

La leçon « Schéma de délégation d’événements » est-elle gratuite ?

Oui — le texte complet de « Schéma de délégation d’é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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Schéma de délégation d’événements » ?

Gérez les événements de nombreux enfants depuis un seul écouteur parent. 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 2 sur 4.

Combien de temps prend la leçon « Schéma de délégation d’é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 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