L’interactivité repose sur les événements : des actions de l’utilisateur (clic, survol, frappe au clavier) auxquelles votre code peut réagir.

Quelques événements courants

  • click — l’utilisateur clique sur un élément.
  • mouseover — la souris survole un élément.
  • keydown — une touche du clavier est enfoncée.

Écouter un événement

On relie une réaction à un élément avec addEventListener :

const bouton = document.querySelector("button");
bouton.addEventListener("click", function() {
  alert("Vous avez cliqué !");
});

Le principe est simple : « quand cet événement se produit sur cet élément, exécute cette fonction ». La fonction fournie s’appelle une fonction de rappel (callback).

À retenir : addEventListener permet de réagir aux actions de l’utilisateur. C’est le cœur de l’interactivité d’une page.

PrécédentSuivant