É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 : clic, saisie, soumission, frappe clavier. Votre code s'y abonne :

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 ce qui s'est passé.

Événements courants : click, input (frappe en cours), submit, keydown, mouseover.

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=... En JS moderne on intercepte et on traite soi-même (c'est ainsi que les applications web évitent les rechargements).
2. .value lit la saisie ; .textContent écrit dans la page.
3. Validation JS complète la validation HTML (required, type="email") — elle ne la remplace pas, et côté serveur elle sera refaite (règle du cursus sécurité).

Écouter les frappes en direct

document.querySelector("#nom").addEventListener("input", function (event) {
  console.log("valeur actuelle :", event.target.value);
});

input se déclenche à chaque modification : c'est la base de la validation en temps réel et des compteurs de caractères.

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.