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

Question

Accepted Answer

**La délégation d'événements** signifie attacher un **seul** listener à un ancêtre commun au lieu d'un listener par enfant, et utiliser la **propagation d'événements** pour identifier quel enfant a réellement été interagi (via `event.target`). ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## Comment ça fonctionne Quand vous cliquez sur une `

`, l'événement **se propage** vers le haut : `li → ul → body → document`. Un listener sur `

`, et `e.target` vous indique l'élément exact sur lequel vous avez cliqué. `closest("li")` remonte depuis la cible pour trouver l'élément visé (gère aussi les clics sur les éléments internes). ## Pourquoi c'est important - **Performance/mémoire** : un listener au lieu de centaines ou de milliers. - **Fonctionne automatiquement pour les éléments ajoutés dynamiquement** — une nouvelle `
` ajoutée plus tard n'a besoin d'aucun nouveau listener, car le parent la gère déjà. - **Nettoyage simplifié** : supprimer un listener, pas plusieurs. ## Mise en garde Cela s'appuie sur la propagation, donc ça ne fonctionne pas pour les événements qui **ne se propagent pas** (`focus`, `blur` — utilisez `focusin`/`focusout` à la place). C'est exactement la technique que React utilise en interne (un listener racine pour toute l'application).

Comment ça fonctionne

Pourquoi c'est important

Mise en garde