Les événements — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Clic de bouton

Ajoute un écouteur d'événement au clic sur un bouton pour afficher 'Bravo' dans la console.

Voir le corrigé

btn.addEventListener("click", function() {
    console.log("Bravo");
});

Détecte quand un champ input reçoit le focus et change son arrière-plan en jaune.

Voir le corrigé

input.addEventListener("focus", () => {
    input.style.background = "yellow";
});

Dans l'événement 'submit' d'un formulaire, comment empêcher le rechargement de la page ?

Voir le corrigé

form.addEventListener("submit", (e) => {
    e.preventDefault();
});

Comment détecter qu'une touche a été relâchée dans un champ texte ?

Voir le corrigé

input.addEventListener("keyup", (e) => {
    console.log("Touche : " + e.key);
});

Ajoute une classe 'active' à une image lors du survol de la souris.

Voir le corrigé

img.addEventListener("mouseover", () => {
    img.classList.add("active");
});