Partie 10 — Les événements JavaScript : comprendre, écouter et réagir intelligemment

Une page web sans événements est une page figée. Dès que l’utilisateur clique, tape au clavier, survole un élément ou envoie un formulaire, il se produit quelque chose : un événement.

JavaScript ne fait rien “tout seul”. Il attend que quelque chose arrive, puis il réagit. Comprendre les événements, c’est comprendre comment rendre une interface vivante et fluide.

Dans cette partie, nous allons aller plus loin que le simple addEventListener("click"). Vous allez comprendre le mécanisme derrière les événements, ce qui vous évitera beaucoup de bugs plus tard.

1) Qu’est-ce qu’un événement, vraiment ?

Un événement est une action détectée par le navigateur. Cette action peut venir :

• de l’utilisateur (clic, saisie, scroll)
• du navigateur (page chargée)
• du système (redimensionnement de la fenêtre)

Exemples d’événements courants :

• click → clic sur un bouton
• input → saisie dans un champ
• submit → envoi d’un formulaire
• mouseover → survol avec la souris
• load → page chargée

JavaScript adopte une logique très humaine :

“Quand cet événement arrive, fais cette action.”

👉 Sans événements, JavaScript serait incapable de réagir à l’utilisateur.

2) Les event listeners : écouter les événements

Pour réagir à un événement, JavaScript doit l’écouter. Cela se fait avec la méthode addEventListener.

Structure générale :

element.addEventListener("event", function() {
  // code à exécuter
});
  

Exemple simple : bouton

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  console.log("Bouton cliqué");
});
  

Ici, JavaScript reste en attente. Le code ne s’exécute que lors du clic.

Pourquoi addEventListener est la bonne pratique

• Permet plusieurs listeners sur un même élément
• Sépare le HTML du JavaScript
• Code plus propre et maintenable

❌ Mauvaise pratique : utiliser onclick directement dans le HTML.

3) L’objet event : comprendre ce qui s’est passé

Lorsqu’un événement se produit, JavaScript fournit un objet appelé event.

btn.addEventListener("click", (event) => {
  console.log(event);
});
  

Cet objet contient des informations précieuses :

• Quel élément a déclenché l’événement
• Quel type d’événement
• Position de la souris (pour certains events)

Propriété très utilisée :

event.target
  

Elle indique l’élément exact sur lequel l’événement s’est produit.

4) Event bubbling : explication simple

L’event bubbling (propagation) est souvent mal compris, mais il repose sur une idée simple.

Quand un événement se produit sur un élément, il ne s’arrête pas là. Il remonte vers ses parents dans le DOM.

Exemple HTML :

<div id="parent">
  <button id="child">Cliquer</button>
</div>
  

JavaScript :

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent cliqué");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Bouton cliqué");
});
  

Si vous cliquez sur le bouton, la console affichera :

• Bouton cliqué
• Parent cliqué

L’événement est monté du bouton vers le parent.

Arrêter la propagation

child.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Seulement le bouton");
});
  

👉 Comprendre le bubbling est essentiel pour gérer des interfaces complexes.

5) Bonnes pratiques avec les événements

• Toujours utiliser addEventListener
• Éviter les fonctions trop longues dans les listeners
• Extraire la logique dans des fonctions séparées
• Faire attention à la propagation (bubbling)
• Ne pas multiplier les listeners inutilement

Exemple propre :

function handleClick() {
  console.log("Action propre");
}

btn.addEventListener("click", handleClick);
  

6) Exemples réels : boutons et menus

Exemple 1 — Bouton toggle

const toggleBtn = document.getElementById("toggle");
const box = document.getElementById("box");

toggleBtn.addEventListener("click", () => {
  box.classList.toggle("active");
});
  

Exemple 2 — Menu déroulant simple

const menuBtn = document.getElementById("menuBtn");
const menu = document.getElementById("menu");

menuBtn.addEventListener("click", () => {
  menu.style.display = menu.style.display === "block" ? "none" : "block";
});
  

✅ Ces exemples utilisent exactement les mêmes principes que les grandes applications.

7) Erreurs fréquentes à éviter

• Ajouter un listener dans une boucle sans réfléchir
• Oublier preventDefault() quand nécessaire
• Ignorer l’event bubbling
• Mettre trop de logique directement dans le listener

👉 Un événement bien géré rend le code plus simple, pas plus complexe.

Les événements sont le moteur de l’interactivité en JavaScript. En les comprenant correctement, vous pouvez construire des interfaces propres, performantes et agréables à utiliser.

Dans la Partie 11, nous découvrirons le JavaScript asynchrone : comprendre le temps, les promesses, async / await et les appels API.