Chapitre 6 : Événements

Objectif

À la fin de ce chapitre, vous savez ce que fait bouton.addEventListener("click", ...). La fonction est gardée pour plus tard : elle ne s’exécute pas pendant la lecture de script.js. Au clic, le navigateur la rappelle et lui transmet un objet : le type de l’événement, et l’élément qui l’a reçu. Le dossier premiere-page reste en place, ainsi que phraseEssai, prenoms, phrases, essai et les deux getElementById.

La fonction est rangée, pas appelée

Rechargez premiere-page sans cliquer. Le paragraphe affiche « En attente d’un clic. ». essai.tentatives vaut 0. phrases est vide. Le navigateur a pourtant déjà lu script.js : les deux getElementById, prenoms, essai, sessionOuverte et phraseEssai.

La dernière instruction est l’écouteur, celui du chapitre 4.

bouton.addEventListener("click", function () {
  if (sessionOuverte === false) {
    message.textContent = "Connectez-vous pour continuer.";
  } else {
    essai.tentatives = essai.tentatives + 1;
    const phrase = phraseEssai(essai.prenom, essai.tentatives, essai.limite);
    phrases.push(phrase);
    message.textContent = phrase;
  }
});

"click" est le nom de l’événement. La fonction qui suit n’a pas de nom. Après son accolade, il n’y a pas de parenthèses d’appel : elle est rangée dans le bouton, pas exécutée. Au chargement, le corps qui augmente essai.tentatives et qui écrit dans message.textContent n’a pas tourné. La phrase d’attente reste affichée.

Le bouton porte type="button". Ce clic ne recharge pas la page, donc essai reste en mémoire. Un rechargement relirait le fichier et remettrait tentatives à 0.

Ajoutez un journal sur la première ligne du corps, juste avant le if. Rechargez sans cliquer.

console.log("La fonction du clic est en cours.");

La console ne montre pas cette phrase. Cliquez une fois : elle apparaît, puis le paragraphe affiche « Aina, essai 1 sur 3. ». Retirez le console.log.

Des parenthèses de trop

Ajoutez une paire de parenthèses juste après l’accolade qui ferme la fonction.

    message.textContent = phrase;
  }
}());

Ces parenthèses appellent la fonction pendant la lecture du script. sessionOuverte vaut true, donc la branche else part tout de suite. essai.tentatives passe à 1. phraseEssai renvoie « Aina, essai 1 sur 3. ». phrases garde ce texte, et le paragraphe l’affiche avant tout clic.

La fonction ne contient pas de return. Son résultat est undefined. addEventListener reçoit undefined à la place d’une fonction et ne range rien. Il n’y a pas d’erreur rouge : l’appel a eu lieu, l’écouteur n’a pas été posé. Un clic ensuite ne change plus la phrase, ni essai.tentatives, ni phrases.length. Personne n’écoute.

Retirez les parenthèses. La ligne redevient });. Rechargez : « En attente d’un clic. » revient, et le premier clic affiche à nouveau « Aina, essai 1 sur 3. ». Le piège serait le même avec un nom. reagir() partirait tout de suite. reagir, sans parenthèses, serait gardée pour le clic. Le fichier n’a pas besoin de ce nom.

Ce que le clic transmet

Au clic, le navigateur appelle la fonction gardée et lui passe un objet. Dans le fichier, elle s’écrit function (), sans paramètre. L’objet est transmis quand même. Sans nom pour le recevoir, le corps ne le lit pas. Le clic marche tout de même : le corps utilise essai, phraseEssai et message.

Nommez le paramètre et ajoutez trois journaux en tête du corps. Laissez le if en dessous.

bouton.addEventListener("click", function (evenement) {
  console.log(evenement.type);
  console.log(evenement.target.id);
  console.log(evenement.target === bouton);

Rechargez sans cliquer : la console reste vide. Cliquez le bouton. evenement.type vaut "click". evenement.target est l’élément cliqué, son id vaut "action", et evenement.target === bouton vaut true. C’est l’élément trouvé au chargement par getElementById("action"). Son texte reste « Nouvel essai » : le clic change le paragraphe, pas le bouton.

evenement.currentTarget est l’élément qui porte l’écouteur. Ici, c’est le même bouton. evenement n’existe que le temps de cet appel. Un clic sur le paragraphe n’écrit rien : message n’écoute pas.

Chaque clic est un nouvel appel. Le deuxième affiche encore "click" et "action", puis « Aina, essai 2 sur 3. ». Le quatrième affiche « Limite dépassée. ». Retirez le paramètre et les trois journaux. La fonction redevient function () : l’objet est encore transmis, le corps l’ignore.

Deux écouteurs, deux passages

Collez une seconde copie de bouton.addEventListener(...) sous la première. Rechargez et cliquez une seule fois. Les deux fonctions partent dans l’ordre. La première affiche « Aina, essai 1 sur 3. ». La seconde affiche « Aina, essai 2 sur 3. ». phrases.length vaut 2. Supprimez la copie : un clic ne doit augmenter essai.tentatives que de 1.

Un nom qui ne correspond pas

Remplacez "click" par "clic". Pas d’erreur rouge. addEventListener range la fonction sous le texte écrit. Le bouton produit "click", en anglais. Les deux noms diffèrent, donc la fonction ne part pas. La phrase d’attente reste, et essai.tentatives reste à 0. "Click" avec une majuscule rate de la même façon : la casse compte, comme pour "message" au chapitre 5. Remettez "click". Le premier clic affiche à nouveau « Aina, essai 1 sur 3. ».

Exercice

Rechargez sans clic. Le paragraphe affiche « En attente d’un clic. ». Dans la console, essai.tentatives vaut 0 et phrases.length vaut 0.
Ajoutez () après l’accolade de la fonction, puis rechargez. Le paragraphe affiche « Aina, essai 1 sur 3. » sans clic, et un nouveau clic ne change plus rien. Retirez ces parenthèses.
Nommez le paramètre evenement, affichez evenement.type et evenement.target.id dans la console, rechargez, puis cliquez. Vous obtenez click et action. Retirez le paramètre et les journaux.
Écrivez "clic" à la place de "click", rechargez, puis cliquez. Le paragraphe ne change pas. Rétablissez "click".

À retenir

addEventListener range une fonction pour plus tard. Sans clic, son corps ne s’exécute pas, et la phrase d’attente reste affichée.
Des parenthèses après la fonction l’appellent au chargement. addEventListener reçoit alors undefined et ne pose pas d’écouteur.
Au clic, le navigateur transmet un objet. type vaut "click". target est le bouton action.
Le nom doit être exactement "click". Un second écouteur ferait le travail deux fois pour un seul clic.

La suite

Le clic sait quand partir, et le navigateur décrit l’événement. La phrase vient encore de la mémoire du script : prenoms, essai et phraseEssai. Le chapitre 7, « Fetch et JSON », demandera des données à une adresse, attendra la réponse, puis affichera un titre et un texte. Si l’adresse ne répond pas, la page montrera un message. Gardez premiere-page, phraseEssai, prenoms, phrases, essai et les deux getElementById. L’écouteur reste function (), sans parenthèses d’appel et sans console.log.