Retour
Module 1 : Introduction à JavaScript
1.1 — Premiers pas en JavaScript Aperçu
🛠️ Projet 1 — Explorateur console
Module 2 : Opérateurs et conditions
2.1 — Conditions et logique Aperçu
🛠️ Projet 2 — Calculateur
Module 3 : Fonctions et portée
3.1 — Écrire et utiliser des fonctions Aperçu
🛠️ Projet 3 — Calculatrice
Module 4 : Boucles et tableaux
4.1 — Tableaux et boucles Aperçu
🛠️ Projet 4 — Analyse de notes
Module 5 : Objets et JSON
5.1 — Objets JavaScript Aperçu
🛠️ Projet 5 — Gestionnaire de produits
Module 6 : DOM — Sélectionner des éléments
6.1 — Le DOM et les sélecteurs Aperçu
🛠️ Projet 6 — Explorateur DOM
Module 7 : DOM — Modifier le contenu et le style
7.1 — Modifier la page Aperçu
🛠️ Projet 7 — Compteur de clics
Module 8 : Événements
8.1 — Écouter les événements Aperçu
🛠️ Projet 8 — Formulaire interactif
Module 9 : Formulaires dynamiques et validation
9.1 — Validation avancée Aperçu
🛠️ Projet 9 — Inscription complète
Module 10 : API Fetch — Requêtes HTTP
10.1 — Fetch et async/await Aperçu
🛠️ Projet 10 — Liste d'utilisateurs
Module 11 : Manipulation de données — filter, map, reduce
11.1 — Filter, Map, Reduce Aperçu
🛠️ Projet 11 — Tableau de bord
Module 12 : Stockage local — localStorage
12.1 — Persister des données Aperçu
🛠️ Projet 12 — Préférences persistantes
Module 13 : Modules et organisation du code
13.1 — Modules ES6 Aperçu
🛠️ Projet 13 — Refactorisation modulaire
Module 14 : Projet final — Site interactif complet
14.1 — Application web interactive Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 8 : Événements Aperçu gratuit

8.1 — Écouter les événements

📋 Objectifs d'apprentissage

  • Utiliser addEventListener
  • Maîtriser les événements click, submit, input, keydown
  • Comprendre l'objet event (e)
  • Utiliser preventDefault et stopPropagation
🎯 addEventListener btn.addEventListener("click", () => { console.log("Bouton cliqué !"); }); Événements courants : click, dblclick, submit, input, change, keydown, keyup, scroll, load

Le pattern addEventListener

const bouton = document.querySelector("#btn");
bouton.addEventListener("click", (event) => {
    event.preventDefault(); // Empêche le comportement par défaut
    console.log("Clic !");
});

preventDefault() — indispensable pour les formulaires

form.addEventListener("submit", (e) => {
    e.preventDefault(); // Empêche le rechargement de la page !
    // Traitement du formulaire...
});

Sans preventDefault, le formulaire recharge la page et tout votre JavaScript est perdu.

💡 Validation en temps réel

input.addEventListener("input", (e) => {
    const valeur = e.target.value;
    console.log("L'utilisateur tape :", valeur);
});

L'événement input se déclenche à CHAQUE frappe. Parfait pour la validation en direct.

Ceci est un aperçu gratuit.
Voir la formation complète