Événements et formulaires

Objectifs

À la fin de cette leçon, vous saurez :

• écouter des événements avec addEventListener ;
• intercepter une soumission de formulaire ;
• lire et valider les valeurs saisies.

Réagir aux actions de l'utilisateur

Le navigateur émet des événements en continu : chaque clic, frappe, soumission, mouvement de souris. Votre code ne devine rien — il S'ABONNE à ce qui l'intéresse :

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

bouton.addEventListener("click", function () {
  console.log("Cliqué !");
});

Syntaxe générale : element.addEventListener(nomEvenement, fonction). La fonction (le handler) reçoit un objet event décrivant précisément ce qui s'est passé — cible, coordonnées, touche pressée... :

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

Le modèle est celui du pub/sub : le navigateur PUBLIE des événements en permanence ; vous vous abonnez seulement à ceux dont vous avez besoin. Événements courants : click, input (frappe en cours), submit, change, keydown, mouseover.

Détail utile : on peut s'abonner plusieurs fois au même événement (les handlers s'empilent) et se désabonner avec removeEventListener — utile quand un composant disparaît.

Le formulaire, cas roi

<form id="inscription">
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom">
  <button type="submit">Envoyer</button>
</form>
<p id="message"></p>

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

form.addEventListener("submit", function (event) {
  event.preventDefault();              // stoppe l'envoi HTTP natif

  const nom = document.querySelector("#nom").value;
  if (nom.trim() === "") {
    document.querySelector("#message").textContent = "Nom requis";
    return;
  }
  document.querySelector("#message").textContent = "Bonjour " + nom + " !";
  form.reset();
});

Trois idées majeures :

1. preventDefault : par défaut, submit recharge la page vers action=... — le comportement natif HTML vu au chapitre 13. En JS moderne on INTERCEPTE et on traite soi-même : c'est ainsi que les applications web évitent les rechargements complets ;
2. .value lit la saisie d'un champ ; .textContent écrit dans la page. Les deux sens du flux de données en une phrase ;
3. Validation JS complète la validation HTML (required, type="email") — elle ne la remplace pas, et côté serveur elle sera refaite ENCORE : règle intangible du cursus sécurité (« ne jamais faire confiance aux entrées »).

Écouter les frappes en direct

const nom = document.querySelector("#nom");
const compteur = document.querySelector("#compteur");

nom.addEventListener("input", function () {
  compteur.textContent = nom.value.length + " caractères";
});

input se déclenche À CHAQUE modification : c'est la base de la validation temps réel et des compteurs de caractères. Comparez avec change, qui ne se déclenche qu'à la sortie du champ — choisir le bon événement, c'est déjà la moitié de la fonctionnalité.

Exercice

1. Ajoutez au CV un bouton « Mode sombre » qui bascule une classe sombre sur body.
2. Créez un mini formulaire « commentaire » qui affiche sous lui-même le texte saisi, sans rechargement.
3. Comptez les caractères d'un champ texte en direct.

Résumé

• addEventListener abonde partout ; handler reçoit event.
• submit + preventDefault = contrôle total du formulaire en JS.
• value se lit, textContent s'écrit ; input réagit frappe par frappe.