Événements et formulaires

Au chapitre précédent, le script de la Librairie du Campus s'exécutait une fois, au chargement, puis s'arrêtait. Une page interactive doit au contraire attendre : que le visiteur clique sur le bouton du menu, tape un mot dans la recherche, choisisse un livre dans le formulaire de commande. Chacune de ces actions produit un événement, et le script indique à l'avance quelle fonction appeler quand il se produit.

C'est le modèle des interfaces graphiques que Java connaît avec ses listeners : on enregistre un écouteur, et c'est le système qui l'appelle. La différence est qu'en JavaScript tout le programme fonctionne ainsi : il n'y a pas de main qui tourne en boucle, seulement des fonctions qui réagissent. Ce chapitre présente les événements, leur trajet dans l'arbre du DOM, la délégation, et leur usage le plus important : guider la saisie d'un formulaire. À la fin, la Librairie aura un menu repliable sur téléphone, un catalogue filtré pendant la frappe et un formulaire de commande qui calcule son total et explique ses erreurs.

Les affichages de console de ce chapitre ont été produits dans Chromium, en simulant les actions décrites (clics, frappes) avec l'outil Playwright.

8.1 Écouter un événement

<button id="ajouter" type="button">Ajouter au panier</button>
<p>Articles : <output id="compteur">0</output></p>

const bouton = document.querySelector("#ajouter");
const compteur = document.querySelector("#compteur");
let nombre = 0;

bouton.addEventListener("click", (evenement) => {
  nombre += 1;
  compteur.textContent = String(nombre);
  console.log(evenement.type, evenement.target.id, nombre);
});

Après trois clics sur le bouton :

click ajouter 1
click ajouter 2
click ajouter 3

Remarquez la variable nombre : déclarée hors de l'écouteur, elle survit entre deux clics, grâce à la fermeture (chapitre 4). L'écouteur peut être appelé des centaines de fois ; le reste du script, lui, ne s'est exécuté qu'une fois.

On peut enregistrer plusieurs écouteurs du même type sur un même élément : ils s'exécutent dans l'ordre d'enregistrement. Un troisième argument règle des options : { once: true } retire l'écouteur après son premier appel, { capture: true } est expliqué plus bas.

8.2 Les principaux événements

<label for="nom">Nom</label>
<input id="nom" type="text">
<label for="rayon">Rayon</label>
<select id="rayon">
  <option>Informatique</option>
  <option>Littérature</option>
</select>

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

nom.addEventListener("input", () => console.log("input :", nom.value));
nom.addEventListener("change", () => console.log("change :", nom.value));
nom.addEventListener("keydown", (e) => console.log("keydown :", e.key));
rayon.addEventListener("change", () => console.log("change :", rayon.value));

On clique dans le champ, on tape « Tom », on efface le dernier caractère, on quitte le champ avec Tab, puis on choisit « Littérature » :

keydown : T
input : T
keydown : o
input : To
keydown : m
input : Tom
keydown : Backspace
input : To
keydown : Tab
change : To
change : Littérature

• keydown se produit à l'enfoncement de chaque touche, avant que le caractère n'apparaisse ; e.key donne la touche ("T", "Backspace", "Tab", "Escape"…).
• input se produit à chaque modification de la valeur, quelle qu'en soit l'origine (clavier, collage, dictée, correcteur) : c'est l'événement des réactions « pendant la frappe ».
• change se produit quand la modification est validée : à la sortie du champ pour un texte, immédiatement pour une liste, une case ou un bouton radio.