Events — JavaScript course

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)

Ce ne sont que les plus courants : il existe des dizaines de types d'événements (clavier, souris, tactile, glisser-déposer, formulaire, média, défilement...). Pour la liste complète, garde ces deux références sous la main :

Référence des événements sur W3Schools : tous les types, classés par catégorie, avec des exemples.
Référence des événements sur MDN : la doc de référence, au plus près de la norme (la source que suivent les navigateurs).

L'objet event

Un détail a pu te surprendre : nos fonctions reçoivent un paramètre event qu'on n'a jamais demandé. D'où sort-il ?

La clé, c'est de comprendre que ce n'est pas toi qui appelles ta fonction. Avec addEventListener, tu te contentes de confier ta fonction au navigateur : « quand on cliquera, exécute celle-ci ». C'est ensuite le navigateur qui l'appelle, au moment du clic. Et quand il l'appelle, il en profite pour lui passer un objet event en premier argument, qui décrit ce qui vient de se passer : le type d'action, l'élément visé, la touche pressée, la position du clic...

Autrement dit, l'argument arrive tout seul parce que l'appelant, c'est le navigateur, pas toi. Toi, tu choisis juste son nom (event, e, ce que tu veux) : ce qui compte, c'est sa place, le premier paramètre.

C'est le navigateur qui appelle ta fonction, pas toi : au passage, il lui tend l'objet event. Voilà pourquoi tu reçois un argument sans l'avoir demandé.

Chaque handler reçoit donc cet objet. Voici comment s'en servir :

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)

These are just the most common ones: there are dozens of event types (keyboard, mouse, touch, drag & drop, form, media, scroll...). For the full list, keep these two references handy:

Events reference on W3Schools — all types, sorted by category, with examples.
Events reference on MDN — the reference docs, closest to the standard (the source browsers follow).

The event object

One detail may have surprised you: our functions receive an event parameter we never asked for. Where does it come from?

The key is to realize that you are not the one calling your function. With addEventListener, you simply hand your function to the browser: "when a click happens, run this one". It's then the browser that calls it, at the moment of the click. And when it does, it takes the opportunity to pass it an event object as the first argument, describing what just happened: the action type, the target element, the key pressed, the click position...

In other words, the argument shows up on its own because the caller is the browser, not you. You just pick its name (event, e, whatever): what matters is its position, the first parameter.

The browser calls your function, not you: as it does, it hands over the event object. That's why you receive an argument you never asked for.

So every handler receives this object. Here's how to use it:

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é.

Ré-explique sans regarder

Sans relire la réponse de l'IA : sur la soumission d'un formulaire, pourquoi appelle-t-on event.preventDefault(), et que se passe-t-il si on l'oublie ?

Une bonne explication dit : par défaut, le navigateur réagit à un submit en envoyant le formulaire et en rechargeant la page. event.preventDefault() annule ce comportement natif pour qu'on gère la soumission en JavaScript (lire les .value, valider, appeler une API). Si on l'oublie : la page se recharge, le code après ne s'exécute pas et tout est perdu.

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

Accepter ou rejeter le code de l'IA

Tu demandes à l'IA de rendre chaque tâche d'une liste cliquable (clic = barrer). Elle propose ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

const taches = document.querySelectorAll("#liste li");
taches.forEach(function(li) {
  li.addEventListener("click", function() {
    li.classList.toggle("fait");
  });
});

À rejeter pour ce besoin. Le code tourne, mais il attache un listener à chaque <li> existant au moment de l'exécution : toute tâche ajoutée ensuite (cas typique d'une todo-list) ne réagira pas au clic. C'est exactement le piège que résout la délégation : un seul addEventListener("click") sur le #liste parent, puis un test sur event.target. Ça couvre les éléments dynamiques et évite des dizaines de listeners.

Rappel libre

Sans remonter dans la leçon : quels sont les deux arguments d'addEventListener, et d'où vient l'objet event que reçoit le handler alors qu'on ne l'a jamais demandé ?

addEventListener prend le type d'événement ("click", "submit", "input"…) et une fonction handler. On ne fait que confier cette fonction au navigateur : ce n'est pas nous qui l'appelons. Au moment de l'action, c'est le navigateur qui l'appelle et lui passe un objet event en premier argument (type, event.target, event.key, position…). Le nom est libre, c'est sa place de premier paramètre qui compte.

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

Next step

Your page now reacts to clicks and visitor input. What's left is feeding it data from elsewhere. The next lesson reaches out to the web: Fetch and APIs, to pull remote data without ever reloading the page.

Lesson 7: Fetch and APIs →