Les événements — Cours JavaScript

addEventListener — écouter les actions

Les événements sont le cœur de l'interactivité. Quand l'utilisateur clique, tape, défile — JavaScript peut réagir.

const bouton = document.querySelector("#monBouton");

bouton.addEventListener("click", function() {
  alert("Vous avez cliqué !");
});

La méthode addEventListener prend deux arguments :

Le type d'événement : "click", "submit", "input", "keydown"...
La fonction handler : ce qui se passe quand l'événement survient

Événements courants

click — clic souris
submit — soumission d'un formulaire
input — saisie dans un champ (en temps réel)
keydown — touche enfoncée
mouseover / mouseout — survol souris
change — valeur d'un champ modifiée (quand il perd le focus)

L'objet event

Chaque handler reçoit automatiquement un objet event avec des informations utiles :

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

  const input = document.querySelector("#email");
  console.log("Email :", input.value);
});

document.addEventListener("keydown", function(event) {
  console.log("Touche :", event.key); // "Enter", "Escape", "a"...
});

event.preventDefault() est indispensable pour les formulaires — sans ça, la page se recharge et vous perdez tout.

Délégation d'événements

Au lieu d'ajouter un événement sur chaque élément, vous l'ajoutez sur le parent et vérifiez quel enfant a été cliqué :

document.querySelector("#liste").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("fait");
  }
});

Avantage : ça fonctionne même pour les éléments ajoutés dynamiquement après le chargement de la page.

addEventListener — listening to actions

Events are the heart of interactivity. When a user clicks, types, scrolls — JavaScript can react.

const button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  alert("You clicked!");
});

The addEventListener method takes two arguments:

The event type: "click", "submit", "input", "keydown"...
The handler function: what happens when the event occurs

Common events

click — mouse click
submit — form submission
input — typing in a field (real-time)
keydown — key pressed
mouseover / mouseout — mouse hover
change — field value changed (when it loses focus)

The event object

Every handler automatically receives an event object with useful information:

document.querySelector("form").addEventListener("submit", function(event) {
  event.preventDefault(); // prevents page reload

  const input = document.querySelector("#email");
  console.log("Email:", input.value);
});

document.addEventListener("keydown", function(event) {
  console.log("Key:", event.key); // "Enter", "Escape", "a"...
});

event.preventDefault() is essential for forms — without it, the page reloads and you lose everything.

Event delegation

Instead of adding an event on each element, you add it on the parent and check which child was clicked:

document.querySelector("#list").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
  }
});

Advantage: it works even for elements added dynamically after the page loads.

Essayez vous-même

<div id="compteur">0</div>
<div style="text-align:center">
  <button class="btn btn-green" id="plus">+1</button>
  <button class="btn btn-red" id="moins">-1</button>
  <button class="btn btn-blue" id="reset">Reset</button>
</div>
<div id="log"></div>

function updateLog(action) {
    log.innerHTML = action + "<br>" + log.innerHTML;
  }

document.getElementById("plus").addEventListener("click", function() {
    count++;
    display.textContent = count;
    updateLog("Clic +1 → " + count);
  });

document.getElementById("moins").addEventListener("click", function() {
    count--;
    display.textContent = count;
    updateLog("Clic -1 → " + count);
  });

document.getElementById("reset").addEventListener("click", function() {
    count = 0;
    display.textContent = count;
    updateLog("Reset → 0");
  });
</script>

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Crée un formulaire de contact HTML avec validation JavaScript en temps réel. Utilise addEventListener sur les champs input et submit. Explique chaque événement utilisé.

Exercice : Corrigez le code de l'IA

L'IA a oublié event.preventDefault() dans le handler de formulaire. La page se recharge au lieu d'afficher le message. Ajoutez la ligne manquante.

Corrigez le code

Que fait event.preventDefault() ?

Supprime l'événement Empêche le comportement par défaut (ex: rechargement de page) Arrête tout le JavaScript

Quel événement détecte la saisie en temps réel dans un champ ?

input submit click

Qu'est-ce que la délégation d'événements ?

Désactiver les événements Ajouter un événement sur chaque élément Écouter sur le parent et vérifier event.target