Chapitre 12 – Les événements

1. Types d'événements

Les événements permettent à JavaScript de répondre à des interactions de l'utilisateur (clics, frappes clavier, mouvements de souris, envois de formulaire, etc.). Voici les principaux types :

clic : click, dblclick, contextmenu
souris : mouseover, mouseout, mousemove, mousedown, mouseup
clavier : keydown, keypress, keyup
formulaire : submit, input, change, focus, blur
fenêtre : load, resize, scroll, unload

Essayez aussi de déplacer la souris ici ou d'appuyer sur une touche

const bouton = document.querySelector("button");
bouton.addEventListener("click", () => {
  alert("Bouton cliqué !");
});

document.addEventListener("keydown", (e) => {
  console.log("Touche appuyée :", e.key);
});

2. Propagation des événements (bubbling et capturing)

Lorsque plusieurs éléments sont imbriqués, un événement peut se propager à travers la hiérarchie du DOM. Il existe deux phases :

Capturing (captage) : l'événement descend du document jusqu'à l'élément cible.
Bubbling (remontée) : l'événement remonte de l'élément cible vers <html>.

Par défaut, JavaScript écoute pendant la phase de bubbling. Mais vous pouvez spécifier le mode avec le 3^e argument de addEventListener.

Parent

Enfant (cliquez ici)

<div id="parent">
  <button id="enfant">Clique-moi</button>
</div>

<script>
document.getElementById("parent").addEventListener("click", () => {
  console.log("Clic sur parent");
}, true); // true = phase de capturing

document.getElementById("enfant").addEventListener("click", () => {
  console.log("Clic sur enfant");
});
</script>

3. event.target vs event.currentTarget

Lorsqu'un gestionnaire est appelé, l'objet événement (souvent nommé e ou event) contient des propriétés utiles :

event.target : l'élément exact qui a déclenché l'événement
event.currentTarget : l'élément sur lequel l'événement est actuellement en train d'être traité

document.getElementById("parent").addEventListener("click", (event) => {
  console.log("target :", event.target);
  console.log("currentTarget :", event.currentTarget);
});

4. Empêcher le comportement par défaut

Certains éléments (comme les liens ou formulaires) ont un comportement par défaut. On peut l'empêcher avec event.preventDefault().

const lien = document.querySelector("a");

lien.addEventListener("click", (e) => {
  e.preventDefault(); // empêche d'ouvrir le lien
  alert("Lien désactivé !");
});

Exemple de formulaire

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  alert("Formulaire intercepté !");
});

Résumé du chapitre

Les événements permettent d'interagir avec l'utilisateur via des actions comme les clics, les frappes clavier ou les envois de formulaire.
Il existe deux phases de propagation : capturing (descente) et bubbling (remontée). Par défaut, on écoute pendant le bubbling.
event.target donne l'élément exact qui a déclenché l'événement, event.currentTarget donne l'élément sur lequel le gestionnaire est attaché.
event.preventDefault() empêche le comportement par défaut d'un élément HTML (comme suivre un lien ou soumettre un formulaire).

Une bonne compréhension des événements est cruciale pour rendre vos interfaces dynamiques et réactives.