1. Le modèle événementiel asynchrone

Le navigateur avertit le script lors de toute action utilisateur (clic, frappe au clavier, défilement, soumission de formulaire) en émettant un événement. On attache une fonction de réaction (callback) à l’aide de addEventListener() :

const formulaire = document.querySelector("#form-contact");

formulaire.addEventListener("submit", (event) => {
    // Interrompt le rechargement brutal synchrone de la page
    event.preventDefault();
    console.log("Données prêtes à être expédiées via API asynchrone.");
});

2. Propagation des événements : bouillonnement (Event Bubbling)

Lorsqu’un événement survient sur un élément enfant, il remonte automatiquement toute la hiérarchie parentale du DOM jusqu’à la racine document. Ce comportement fondamental est la base du modèle événementiel du web.

3. La délégation d’événements (Event Delegation)

Plutôt que d’attacher des dizaines d’écouteurs d’événements individuels sur chaque ligne d’une longue table ou chaque carte d’une liste dynamique, la délégation consiste à placer un unique écouteur sur le conteneur parent et à inspecter event.target :

const listeFormations = document.querySelector("#liste-formations");

listeFormations.addEventListener("click", (event) => {
    const boutonAction = event.target.closest(".btn-details");
    if (boutonAction) {
        const formationId = boutonAction.dataset.id;
        console.log(`Consultation des détails du cours ID : ${formationId}`);
    }
});

Synthèse pédagogique : La délégation d’événements optimise radicalement la consommation mémoire et assure la prise en charge immédiate des éléments ajoutés dynamiquement dans le DOM.

PreviousNext