# Atelier 02 — Custom Events & Communication entre Composants > **Prérequis :** Atelier 01 — tu sais créer des Custom Elements avec leurs callbacks > **Durée estimée :** 2 à 3 jours > **Ce que tu sauras faire :** Faire communiquer des composants indépendants via le système d'événements natif du DOM --- ## Introduction Dans une application avec plusieurs composants, la question qui se pose immédiatement est : **comment font-ils pour se parler ?** L'article que tu as lu résume le pattern en une phrase : > *"Data down through properties and attributes, events up through the bubbling system."* Ce pattern a un nom : **flux de données unidirectionnel**. Il est simple, prévisible, et il repose entièrement sur des mécanismes natifs du navigateur — aucune bibliothèque nécessaire. --- ## 1. Rappel : les événements du DOM Avant de créer des événements personnalisés, rappelons comment les événements natifs fonctionnent. ### Émettre un événement ```js const btn = document.querySelector('button'); btn.dispatchEvent(new Event('click')); ``` ### Écouter un événement ```js document.addEventListener('click', (event) => { console.log('Clic détecté sur :', event.target); }); ``` ### La propagation (bubbling) Par défaut, la plupart des événements natifs **remontent** dans le DOM. Un clic sur un ` ``` **Critère de succès :** Avec 10 items dans la liste, il n'y a qu'un seul écouteur attaché. Les événements remontent correctement. --- > **Indice 1** — Dans l'écouteur unique : `const btn = event.target.closest('button[data-action]')`. Si `btn` est `null`, le clic n'était pas sur un bouton d'action — `return` immédiatement. > **Indice 2** — Pour trouver l'`id` de l'item parent du bouton : `btn.closest('li[data-id]').dataset.id`. > **Indice 3** — Pour vérifier qu'il n'y a qu'un seul écouteur : dans les DevTools Chrome, sélectionne le composant dans l'onglet Elements, puis regarde l'onglet "Event Listeners". Tu ne dois voir qu'un seul écouteur `click`. --- ## Checklist de sortie - [ ] Tu sais créer un `CustomEvent` avec `detail`, `bubbles` et `composed` - [ ] Tu comprends pourquoi `bubbles: true` est nécessaire pour la communication inter-composants - [ ] Tu as implémenté le pattern "data down, events up" avec un coordinateur - [ ] Tu sais utiliser la délégation d'événements avec `closest()` - [ ] Tu sais nettoyer les écouteurs attachés à l'extérieur du composant - [ ] Tu comprends la différence entre `composed: false` et `composed: true` (anticipation atelier 3) --- ## Références | Sujet | URL | |---|---| | CustomEvent — MDN | https://developer.mozilla.org/fr/docs/Web/API/CustomEvent | | Event bubbling — MDN | https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Events | | Element.closest() — MDN | https://developer.mozilla.org/fr/docs/Web/API/Element/closest | | EventTarget.addEventListener — MDN | https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener | | web.dev — Custom Events | https://web.dev/articles/custom-elements-v1#react_to_changes |