Les langages JavaScript JavaScript dans la page

Réagir aux événements

Un événement se produit quand l'utilisateur agit : un clic, une touche, une saisie, l'envoi d'un formulaire. On y attache une fonction :

const bouton = document.querySelector("#plus");
bouton.addEventListener("click", () => {
    console.log("Clic !");
});

La fonction ne s'exécute pas tout de suite : elle attend l'événement, autant de fois qu'il se produit.

Événement	Quand
`click`	un clic (ou Entrée sur un bouton)
`input`	à chaque modification d'un champ
`change`	quand un champ est validé (case cochée, liste choisie)
`submit`	l'envoi d'un formulaire
`keydown`	une touche enfoncée

La fonction reçoit un objet qui décrit l'événement :

champ.addEventListener("keydown", (e) => {
    if (e.key === "Enter") { ... }
});

Envoyer un formulaire recharge normalement la page. Pour le traiter en JavaScript, on l'en empêche :

formulaire.addEventListener("submit", (e) => {
    e.preventDefault();
    const pseudo = document.querySelector("#pseudo").value.trim();
    ...
});

On écoute submit sur le formulaire, pas click sur le bouton : la touche Entrée dans un champ envoie aussi le formulaire.

trim() retire les espaces au début et à la fin d'une saisie.

2 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte