JavaScript - Réagir aux évènements

Qu'est-ce qu'un évènement ?

Un évènement est une action déclenchée sur la page : clic, survol, frappe au clavier, soumission d'un formulaire, chargement de la page…

JavaScript permet d'écouter ces évènements et d'exécuter une fonction en réponse.

La méthode rapide : onclick dans le HTML

Le moyen le plus simple : l'attribut onclick directement dans la balise.

<button onclick="direBonjour()">Clique ici</button>

<script>
  function direBonjour() {
    alert("Bonjour !");
  }
</script>

Ça marche, c'est lisible pour débuter… mais ça mélange HTML et JavaScript.

Les limites de onclick

<button onclick="action1(); action2()">Plusieurs actions</button>

• Un seul onclick par élément : si tu en écris un deuxième, il écrase le premier.
• Le code JavaScript se retrouve coincé dans le HTML, difficile à maintenir.
• Pas pratique pour les évènements autres que click (clavier, souris…).

Pour un petit prototype, onclick dépanne. Pour tout le reste, utilise addEventListener.

La bonne méthode : addEventListener

addEventListener attache une fonction à un évènement, depuis le JavaScript, sans toucher au HTML.

<button id="monBouton">Clique ici</button>

<script>
  const bouton = document.getElementById("monBouton");

  bouton.addEventListener("click", function() {
    alert("Bonjour !");
  });
</script>

Syntaxe :

element.addEventListener("nomDeLEvenement", fonctionAExecuter);

• Le nom de l'évènement s'écrit sans le préfixe on : "click", pas "onclick".
• La fonction peut être anonyme (comme ci-dessus) ou nommée.

Avec une fonction nommée

function direBonjour() {
  alert("Bonjour !");
}

bouton.addEventListener("click", direBonjour);

⚠️ On passe le nom de la fonction, sans parenthèses. direBonjour (référence) et non direBonjour() (appel immédiat).

Pourquoi préférer addEventListener ?

1. Plusieurs écouteurs sur le même élément

bouton.addEventListener("click", changerCouleur);
bouton.addEventListener("click", afficherMessage);
bouton.addEventListener("click", incrementerCompteur);

Les trois fonctions s'exécutent au clic. Impossible avec onclick.

2. Séparation HTML / JS (JavaScript "non obstrusif")

Le HTML reste propre, tout le comportement vit dans le <script>.

<button id="valider">Valider</button>

document.getElementById("valider")
        .addEventListener("click", validerFormulaire);

C'est le principe du JavaScript non obstrusif (unobtrusive JavaScript) : la structure (HTML), la présentation (CSS) et le comportement (JS) restent dans des fichiers séparés. Le terme est ancien (années 2000) mais l'idée reste d'actualité — c'est la base de tous les frameworks modernes :

• HTML lisible sans JS embarqué partout.
• Comportement modifiable sans toucher au HTML.
• Fichier .js externe → mis en cache par le navigateur, réutilisable sur plusieurs pages.

3. Tout type d'évènement

champ.addEventListener("input", verifierSaisie);
document.addEventListener("keydown", gererClavier);
window.addEventListener("load", initialiser);

4. On peut retirer l'écouteur

bouton.removeEventListener("click", direBonjour);

(Ne fonctionne qu'avec une fonction nommée — pas avec une fonction anonyme.)

L'objet event

La fonction appelée reçoit automatiquement un objet event contenant les infos sur ce qui s'est passé.

bouton.addEventListener("click", function(event) {
  console.log(event);          // tout l'objet
  console.log(event.target);   // l'élément cliqué
  console.log(event.type);     // "click"
});

Exemple : connaître la touche pressée

document.addEventListener("keydown", function(event) {
  console.log("Touche pressée :", event.key);

  if (event.key === "Enter") {
    alert("Tu as appuyé sur Entrée !");
  }
});

Exemple : empêcher le comportement par défaut

const formulaire = document.getElementById("monForm");

formulaire.addEventListener("submit", function(event) {
  event.preventDefault(); // bloque l'envoi du formulaire
  console.log("Envoi intercepté !");
});

Exemple complet

<button id="changeur">Change la couleur</button>
<p id="texte">Regarde-moi changer !</p>

<script>
  const bouton = document.getElementById("changeur");
  const texte = document.getElementById("texte");

  bouton.addEventListener("click", function() {
    texte.style.color = "crimson";
    texte.style.fontWeight = "bold";
  });

  texte.addEventListener("mouseover", function() {
    texte.style.backgroundColor = "yellow";
  });

  texte.addEventListener("mouseout", function() {
    texte.style.backgroundColor = "transparent";
  });
</script>

À retenir

• Un évènement = une action sur la page (clic, touche, survol…).
• onclick="..." dans le HTML : rapide, mais limité et à éviter dès que le projet grandit.
• element.addEventListener("click", fonction) : la bonne méthode, plusieurs écouteurs possibles, HTML et JS séparés.
• Le nom de l'évènement s'écrit sans on : "click", "keydown", "submit"…
• La fonction reçoit un objet event : event.target, event.key, event.preventDefault()…
• On passe la fonction sans les parenthèses : addEventListener("click", maFonction).