JavaScript Academy · Leçon

Listes dynamiques avec délégation

Gérez les événements des éléments ajoutés lors de l’exécution.

Listes dynamiques avec délégation 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.

Le problème des éléments dynamiques

Lorsque vous associez directement des écouteurs aux éléments, tout élément ajouté au DOM après la configuration n’en possède aucun. La délégation résout ce problème, car l’écouteur du parent intercepte également les événements des futurs éléments enfants.

Les écouteurs directs ne fonctionnent plus

Ici, un écouteur est ajouté aux éléments existants. Un élément ajouté ensuite ne reçoit rien et reste inactif.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

La délégation fonctionne automatiquement

Avec un écouteur délégué sur le parent, le nouvel élément est automatiquement pris en charge. Il n’est pas nécessaire de réassocier les écouteurs après chaque insertion.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Ajouter des éléments

Construisez de nouveaux éléments et ajoutez-les. Comme le parent utilise déjà la délégation, ils deviennent interactifs dès leur apparition.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Supprimer des éléments

La suppression est également simple. Un gestionnaire délégué peut détecter un bouton de suppression à l’intérieur de la ligne et supprimer cette ligne.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Distinguer les sous-actions

Une ligne peut comporter plusieurs parties interactives. Utilisez matches() ou closest() pour déterminer laquelle a été sélectionnée, puis adaptez le traitement.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Rendre l’interface à partir des données

Un schéma courant consiste à conserver l’état dans un tableau, à générer les lignes à partir de celui-ci et à déléguer les clics. Le nouveau rendu remplace les éléments enfants, mais l’unique écouteur du parent reste intact.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Fini les problèmes de nettoyage

Avec des écouteurs associés à chaque élément, vous devez penser à appeler removeEventListener avant de supprimer les nœuds afin d’éviter les fuites. La délégation vous libère de cette contrainte : supprimer un élément enfant ne laisse aucun écouteur orphelin.

Basculer des classes

La délégation s’associe bien à la bascule de classes pour gérer les états de sélection. Le gestionnaire trouve la ligne et active ou désactive une classe.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Lire une identité stable

Comme les nœuds du DOM sont remplacés lors d’un nouveau rendu, ne stockez jamais de références vers eux. Stockez un identifiant stable dans data-id et recherchez vos données à l’aide de cet identifiant dans le gestionnaire.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Les événements de saisie aussi

La délégation ne se limite pas aux clics. Vous pouvez déléguer les événements input ou change pour les champs de formulaire ajoutés dynamiquement, de la même manière.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Vérification rapide

Listes dynamiques et délégation.

Récapitulatif

La délégation est particulièrement efficace avec les listes dynamiques : un seul écouteur parent gère les éléments enfants actuels et futurs, résiste aux nouveaux rendus et ne nécessite aucun nettoyage élément par élément. Utilisez matches() et closest() pour choisir le traitement selon les sous-actions, et stockez des identifiants stables dans data-* afin que les gestionnaires puissent retrouver votre modèle de données.

Questions Fréquemment Posées

La leçon « Listes dynamiques avec délégation » est-elle gratuite ?

Oui — le texte complet de « Listes dynamiques avec délégation » 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 « Listes dynamiques avec délégation » ?

Gérez les événements des éléments ajoutés lors de l’exécution. 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 « Listes dynamiques avec délégation » ?

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