Écouter les événements

C'est là que la page devient interactive. On "attache" une fonction à un événement (clic, survol, clavier...).

La méthode reine : addEventListener.

const bouton = document.querySelector("button");

bouton.addEventListener("click", () => {
    console.log("On a cliqué !");
    alert("Bonjour !");
});

L'Objet Event (e)

Le callback reçoit souvent un argument (qu'on appelle e ou event). Il contient les infos sur ce qu'il s'est passé.

const input = document.querySelector("input");

input.addEventListener("keyup", (e) => {
    console.log("Touche pressée : " + e.key);
    
    // Récupérer la valeur actuelle du champ
    console.log("Texte entier : " + e.target.value);
});

Empêcher le comportement par défaut (preventDefault)

Très utile pour les formulaires (pour pas que la page se recharge).

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
    e.preventDefault(); // STOP ! Ne recharge pas la page !
    console.log("Formulaire envoyé manuellement via JS");
});