cours1 min de lecture

Événements JavaScript

Modèle réactif d'une page Web — attacher des écouteurs d'événements souris et clavier en JavaScript pour rendre l'interface vivante.

programme

Introduction

Une page HTML seule est inerte. Pour qu'elle réagisse à un clic, à une touche enfoncée, à un mouvement de souris, il faut un langage de programmation exécuté dans le navigateur : c'est le rôle de JavaScript. Le modèle fondamental est dit événementiel : le navigateur diffuse en permanence des événements (un clic, un appui clavier, un changement de champ…), et votre code attache des fonctions de réaction — des écouteurs — à ceux qui l'intéressent.

Voir et .

JavaScript en 30 secondes

Avant d'écouter le premier événement, posons le strict minimum de syntaxe JavaScript dont ce cours aura besoin. Si vous venez de Python, beaucoup de réflexes s'y transposent — mais quelques pièges méritent d'être signalés.

Déclarer une variable : trois mots-clés possibles, deux à retenir.

let   x = 5;     // variable que l'on pourra réaffecter
const y = 10;    // valeur fixée, interdiction de la réaffecter
var   z;         // ancien mot-clé : à éviter (portée capricieuse)

Types de base : nombres, chaînes, booléens, null, undefined, tableaux ([…]) et objets ({ clé: valeur }). Pas de distinction int / float — tout nombre est un number. Les chaînes peuvent s'écrire avec des guillemets simples, doubles, ou des template literals entre backticks (`…`) qui acceptent l'interpolation ${variable}.

const prenom = "Ada";
const age    = 17;
const phrase = `${prenom} a ${age} ans.`;  // "Ada a 17 ans."

Petit pont Python ↔ JavaScript pour les passages les plus déroutants :

En Python	En JavaScript
`x = 5`	`let x = 5;` ou `const x = 5;`
`print(x)`	`console.log(x);`
`def f(n): return n * n`	`function f(n) { return n * n; }`
`True`, `False`, `None`	`true`, `false`, `null`
`len(t)`	`t.length`

Égalité — un point très sensible :

3 === 3      // true   — égalité stricte (type + valeur)
3 === "3"    // false  — types différents
3 ==  "3"    // true   — égalité laxiste (à éviter)

Utilisez toujours === (et !==) en JavaScript. L'égalité laxiste == applique des conversions implicites qui produisent des résultats surprenants (0 == "" vaut true, null == undefined vaut true…). C'est l'une des sources de bugs les plus connues du langage.

Afficher dans la console du navigateur : console.log(...) est l'équivalent direct du print(...) de Python. Le résultat apparaît dans les outils de développement (touche F12, onglet Console).

Avec ces quelques briques, le code des sections qui suivent devient lisible.

Le modèle événementiel

Imaginez le navigateur comme un journaliste qui annonce en direct tout ce qui se passe dans la page : « clic sur le bouton Envoyer », « touche Entrée pressée », « souris au-dessus de l'image »… Votre programme JavaScript lui adresse une consigne du type : « quand tu annonces tel événement sur tel élément, exécute cette fonction ». Cette mécanique s'appelle un écouteur d'événement (event listener).

// Cibler un élément
const bouton = document.getElementById("monBouton");

// Lui attacher un écouteur sur l'événement "click"
bouton.addEventListener("click", function() {
  alert("Bouton cliqué !");
});

Trois ingrédients à chaque fois :

Un élément cible récupéré dans la page (ici, le bouton).
Un nom d'événement sous forme de chaîne ("click", "keydown"…).
Une fonction qui s'exécute lors de l'événement.

La méthode addEventListener(nom, fonction) est le mécanisme standard et recommandé. Plusieurs écouteurs peuvent coexister sur un même élément pour le même événement — ils s'exécutent dans l'ordre où ils ont été attachés.

Inclure du JavaScript dans une page

Trois manières d'attacher du JS à une page HTML :

<!-- 1. Fichier externe (recommandé) -->
<script src="script.js"></script>

<!-- 2. Bloc inline -->
<script>
  console.log("Bonjour depuis la page !");
</script>

<!-- 3. Attribut on… (à éviter pour de vrais projets) -->
<button onclick="alert('clic')">Cliquer</button>

La méthode externe est la norme : un fichier .js qui charge ses écouteurs au démarrage. On place souvent <script src="…" defer></script> dans le <head>, l'attribut defer garantit que le script s'exécute après le chargement du HTML.

Événements de souris

Les principaux événements de la souris :

Nom	Déclenché quand…
`click`	Un clic complet sur l'élément.
`dblclick`	Un double-clic.
`mousedown` / `mouseup`	Bouton enfoncé / relâché.
`mousemove`	La souris bouge sur l'élément.
`mouseenter` / `mouseleave`	La souris entre dans / sort de l'élément.
`contextmenu`	Clic droit (menu contextuel).

L'objet event transmis à la fonction porte les informations du clic :

const zone = document.getElementById("zone");

zone.addEventListener("mousemove", function(event) {
  console.log(`x = ${event.clientX}, y = ${event.clientY}`);
});

zone.addEventListener("click", function(event) {
  console.log(`Bouton utilisé : ${event.button}`);
  // 0 = gauche, 1 = molette, 2 = droit
});

Quelques propriétés utiles de event pour les événements souris :

event.clientX, event.clientY — coordonnées par rapport à la fenêtre.
event.target — l'élément HTML cliqué.
event.button — bouton de la souris (0/1/2).

Quelle méthode attache une fonction à un événement ?

Événements clavier

Pour le clavier, deux événements principaux :

Nom	Quand
`keydown`	Touche enfoncée (se répète si maintenue).
`keyup`	Touche relâchée.

L'objet event du clavier expose :

event.key — la touche, sous forme lisible ("a", "A", "Enter", "ArrowUp"…).
event.code — l'identifiant physique de la touche ("KeyA", "Enter", "ArrowUp"…), indépendant de la disposition.
event.ctrlKey, event.shiftKey, event.altKey, event.metaKey — booléens indiquant les touches modificatrices.

document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Vous avez appuyé sur Entrée");
  }
  if (event.ctrlKey && event.key === "s") {
    console.log("Raccourci Ctrl+S détecté");
    event.preventDefault(); // empêcher la sauvegarde du navigateur
  }
});

event.preventDefault() bloque l'action par défaut associée à l'événement — utile pour empêcher la soumission d'un formulaire, la sauvegarde via Ctrl+S ou la navigation par flèches.

Trois manières d'attacher une réaction à un clic

Toutes les approches suivantes font la même chose : afficher une alerte au clic.

<!-- 1. Attribut onclick dans le HTML (déconseillé en projet sérieux) -->
<button onclick="alert('clic')">Bouton A</button>

<!-- 2. Propriété .onclick en JS -->
<button id="b">Bouton B</button>
<script>
  document.getElementById("b").onclick = function() {
    alert("clic");
  };
</script>

<!-- 3. addEventListener (recommandé) -->
<button id="c">Bouton C</button>
<script>
  document.getElementById("c").addEventListener("click", function() {
    alert("clic");
  });
</script>

Pourquoi préférer addEventListener ? Parce qu'il autorise plusieurs écouteurs sur le même événement, alors que onclick = … écrase le précédent. Et parce qu'il sépare proprement le HTML (structure) du JS (comportement).

Combien d'écouteurs peut-on attacher à un même bouton pour 'click' avec addEventListener ?

Modifier la réaction d'un bouton existant

Le programme officiel parle de « modifier les méthodes exécutées lors d'un clic sur un bouton ». Voici comment :

<button id="action">Action</button>

const btn = document.getElementById("action");

// État initial : un compteur
let compteur = 0;
function incrementer() {
  compteur += 1;
  console.log(`Compteur = ${compteur}`);
}
btn.addEventListener("click", incrementer);

// Plus tard : on retire le compteur et on installe autre chose
function direBonjour() {
  alert("Bonjour !");
}
btn.removeEventListener("click", incrementer);
btn.addEventListener("click", direBonjour);

Deux conditions pour retirer un écouteur avec removeEventListener :

Passer exactement la même fonction que celle attachée (donc avoir gardé une référence — pas une fonction anonyme).
Passer le même nom d'événement.

Si vous avez attaché un écouteur via addEventListener("click", function() { … }) (fonction anonyme), vous ne pourrez jamais le retirer. Pour pouvoir supprimer, nommer la fonction et garder sa référence.

Le bouillonnement d'événement (notion sensibilisée)

Quand vous cliquez sur un <span> à l'intérieur d'un <button>, l'événement « remonte » vers les parents : span → button → body → document. C'est le bouillonnement (bubbling). Un écouteur attaché à un parent reçoit donc les clics sur ses enfants.

<div id="parent">
  <button id="enfant">Cliquez</button>
</div>

document.getElementById("parent").addEventListener("click", function() {
  console.log("Clic vu par le parent");
});
document.getElementById("enfant").addEventListener("click", function() {
  console.log("Clic vu par le bouton");
});
// Cliquer sur le bouton affiche les deux messages,
// le bouton en premier.

Pour stopper la remontée, event.stopPropagation().

Cas particuliers et pièges

Le script chargé trop tôt : si le <script> est dans le <head> sans defer, il s'exécute avant que les éléments HTML existent. getElementById retournera null. Solutions : placer <script> en fin de <body>, ou utiliser defer, ou écouter DOMContentLoaded.
event non utilisé : il faut tout de même le déclarer dans la signature de la fonction (function(event) { … }) si on veut y accéder.
Fonctions fléchées : () => { … } fonctionne aussi comme écouteur, et est aujourd'hui souvent préférée. Comportement identique pour ce chapitre.

Pour aller plus loin

Vous savez désormais détecter qu'un clic a eu lieu. Le cours suivant (manipulation du DOM) vous apprendra à transformer la page en réaction — c'est cette combinaison événement + modification du DOM qui produit l'interactivité moderne.