JavaScript · Leçon 6

Événements

Un clic, une touche, un formulaire envoyé… Ce sont des événements. On demande à JavaScript de les « écouter » et d'exécuter une fonction quand ils arrivent.

addEventListener

element.addEventListener("click", () => {
  // ce code s'exécute à CHAQUE clic
});
ÉvénementSe déclenche quand…
clickon clique sur l'élément
inputla valeur d'un champ change (à chaque lettre)
changeun champ est validé (select, checkbox…)
submitun formulaire est envoyé
keydownune touche est enfoncée
mouseenter / mouseleavela souris entre / sort de l'élément

L'objet événement

La fonction reçoit un paramètre (souvent nommé e ou event) plein d'infos. Clique dans l'aperçu puis tape au clavier :

Lire un champ en direct

Gérer un formulaire

Par défaut, envoyer un formulaire recharge la page. e.preventDefault() l'en empêche, pour tout gérer en JavaScript.

Pourquoi écouter submit sur le formulaire plutôt que click sur le bouton ?

  1. C'est pareil, aucune différence
  2. submit marche aussi avec la touche Entrée et respecte la validation (required…)
  3. click ne fonctionne pas sur les boutons

L'utilisateur peut valider avec Entrée : seul submit capte tous les cas, après la validation HTML.

À toi de jouer

Le compteur

  • Le bouton +1 augmente le nombre affiché dans #valeur.
  • Le bouton Remise à zéro le remet à 0.
IndiceIl faut deux écouteurs de click : un sur #plus et un sur #zero.
IndiceDans le premier : compteur++;, puis affiche la nouvelle valeur dans #valeur avec textContent.
IndiceLe premier écouteur :
document.querySelector("#plus").addEventListener("click", () => {
  compteur++;
  document.querySelector("#valeur").textContent = compteur;
});

Le mode sombre

Un clic sur #theme ajoute la classe sombre au body, un second clic l'enlève (le CSS est déjà prêt).

IndiceÉcoute le click sur le bouton #theme.
IndiceLe body s’atteint directement avec document.body.
Indicedocument.body.classList.toggle("sombre") ajoute la classe si elle est absente, et l’enlève sinon.

L'aperçu en direct

Pendant que l'utilisateur tape son prénom, affiche Bonjour, Prénom ! dans #apercu.

IndiceL’événement qui se déclenche à chaque lettre tapée s’appelle input.
IndiceLe texte tapé se lit avec la propriété .value du champ.
IndiceDans l’écouteur : apercu.textContent = `Bonjour, ${prenom.value} !`;

Le livre d'or

  • À l'envoi du formulaire, empêche le rechargement.
  • Ajoute le message tapé dans un nouveau li de #messages.
  • Vide ensuite le champ.
IndiceÉcoute l’événement submit sur le formulaire, et commence par e.preventDefault();.
IndiceCrée un li, mets-y texte.value, puis ajoute-le à #messages avec append.
IndicePour finir, vide le champ : texte.value = "";

À retenir