Les événements

Réagir aux actions de l'utilisateur

Jusqu'ici, le code s'exécutait au chargement de la page. Sur un vrai site, on veut réagir quand l'utilisateur fait quelque chose : cliquer, taper, passer la souris.

Ces actions s'appellent des événements. On y réagit avec addEventListener().

Imagine un vigile à l'entrée. Il attend. Quand quelqu'un arrive (l'événement), il décide quoi faire (la fonction). C'est le modèle des événements JavaScript.

addEventListener — écouter un événement

HTML + JavaScript

<!-- HTML -->
<button id="monBouton">Clique ici !</button>
<p id="resultat"></p>

// JavaScript
const bouton   = document.getElementById("monBouton");
const resultat = document.getElementById("resultat");
let compteur = 0;

// On "écoute" l'événement "click" sur le bouton
bouton.addEventListener("click", function() {
  compteur++;
  resultat.textContent = `Tu as cliqué ${compteur} fois !`;
});

La syntaxe d'addEventListener :

Premier argument : le nom de l'événement ("click", "input", "submit"…)
Deuxième argument : la fonction à exécuter quand l'événement se produit

Les événements les plus courants

Référence des événements

click        → clic sur un élément
dblclick     → double-clic
mouseover    → souris passe au-dessus
mouseout     → souris quitte l'élément
keydown      → touche du clavier appuyée
keyup        → touche du clavier relâchée
input        → texte saisi dans un champ (en temps réel)
change       → valeur d'un champ modifiée (au blur)
submit       → formulaire soumis
focus        → champ sélectionné
blur         → champ quitté
DOMContentLoaded → page HTML entièrement chargée

L'objet event

Quand un événement se produit, JavaScript crée un objet event. Il contient des infos : quelle touche pressée, position de la souris, quel élément a déclenché l'événement…

JavaScript

const champTexte = document.querySelector("#champTexte");

// L'événement "input" se déclenche à chaque frappe
champTexte.addEventListener("input", function(event) {
  // event.target → l'élément qui a déclenché l'événement
  console.log(event.target.value); // ce que l'utilisateur a tapé
});

// Détecter la touche pressée
document.addEventListener("keydown", function(event) {
  console.log(`Touche pressée : ${event.key}`);
  if (event.key === "Escape") {
    console.log("Fermer !");
  }
});

Événements sur les formulaires

L'événement submit est important. Par défaut, envoyer un formulaire recharge la page. On utilise event.preventDefault() pour bloquer ce comportement et gérer la soumission nous-mêmes.

HTML + JavaScript

<!-- HTML -->
<form id="monFormulaire">
  <input type="text" id="prenom" placeholder="Ton prénom">
  <button type="submit">Valider</button>
</form>
<p id="message"></p>

// JavaScript
const formulaire = document.getElementById("monFormulaire");

formulaire.addEventListener("submit", function(event) {
  event.preventDefault(); // empêche le rechargement de la page

  const prenom = document.getElementById("prenom").value.trim();

  if (prenom === "") {
    document.getElementById("message").textContent = "Entre ton prénom !";
  } else {
    document.getElementById("message").textContent = `Bonjour, ${prenom} !`;
  }
});

DOMContentLoaded — attendre que la page soit prête

Si ton script est dans le <head>, il s'exécute avant que le HTML soit chargé. Les éléments n'existent pas encore ! Pour éviter ce problème, écoute l'événement DOMContentLoaded.

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  // Tout le code ici s'exécute une fois la page chargée
  const bouton = document.getElementById("monBouton");
  bouton.addEventListener("click", () => {
    console.log("Cliqué !");
  });
});

✅

Si ton <script> est juste avant </body>, tu n'as pas besoin de DOMContentLoaded. Mais si le script est ailleurs, c'est une bonne pratique de l'utiliser.

// À retenir

element.addEventListener("événement", function() { ... })
Événements courants : click, input, submit, keydown, change
L'objet event contient les infos sur l'événement (event.target, event.key)
event.preventDefault() empêche le comportement par défaut (ex: soumission de formulaire)
event.target.value lit la valeur d'un champ de formulaire
Placer le <script> avant </body> garantit que le DOM est prêt