📘 Chapitre 7 – Gestion des événements : click, input, submit

1. 🎯 Objectif pédagogique

Comprendre comment écouter et réagir aux actions de l’utilisateur (clic, saisie dans un champ, soumission de formulaire) grâce aux écouteurs d’événements (addEventListener).

2. 📚 Concepts abordés

Écouter un événement avec addEventListener
Types d’événements : click, input, submit
Utiliser event.preventDefault() pour empêcher un comportement par défaut
Réagir aux actions de l’utilisateur pour modifier le DOM

3. 🧠 Explication théorique

Un événement est une action détectée sur un élément (clic, saisie, etc.). On utilise addEventListener pour attacher une fonction qui sera exécutée lorsque l’événement se produit.

Exemple de clic :

let bouton = document.querySelector("button");
bouton.addEventListener("click", function() {
  console.log("Bouton cliqué !");
});

Exemple de saisie (input) :

let champ = document.querySelector("#nom");
champ.addEventListener("input", function() {
  console.log("Vous avez tapé : " + champ.value);
});

Exemple de soumission (submit) :

let formulaire = document.querySelector("form");
formulaire.addEventListener("submit", function(event) {
  event.preventDefault(); // Empêche l'envoi par défaut
  console.log("Formulaire soumis !");
});

4. 🛠 Tutoriel pratique

Résumé

Nous allons créer une page avec un bouton et un formulaire. Un clic ou une saisie affichera des messages dans la console.

Arborescence du projet

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Gestion des événements</title>
</head>
<body>
  <button id="btn-test">Cliquez-moi</button>
  <br><br>
  <form id="form-test">
    <input type="text" id="nom" placeholder="Entrez votre nom">
    <button type="submit">Envoyer</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript

let bouton = document.getElementById("btn-test");
let champNom = document.getElementById("nom");
let formulaire = document.getElementById("form-test");

bouton.addEventListener("click", function() {
  console.log("Le bouton a été cliqué !");
});

champNom.addEventListener("input", function() {
  console.log("Texte saisi : " + champNom.value);
});

formulaire.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log("Formulaire soumis avec le nom : " + champNom.value);
});

Étape 3 : Test

Ouvre la page, clique sur le bouton, tape dans le champ et soumets le formulaire pour observer la console.

5. 🧾 Résumé et points-clés

addEventListener permet d’exécuter une fonction lorsque l’événement ciblé se produit.
input détecte une saisie en temps réel.
submit nécessite preventDefault() pour éviter le rechargement de la page.