Les événements de la souris et du clavier

Chapitre 13 — Les événements · 13.3 Les événements de la souris et du clavier

Figure 1 — L'ordre des événements.

1. La souris

📄 l3_souris.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <style>
    #cadre { padding: 30px; background: #e3f2fd; border-radius: 10px; }
    #cible { padding: 30px; background: #1565c0; color: #fff; border-radius: 8px; text-align: center; }
    #cible span { display: inline-block; padding: 6px 12px; background: #0d47a1; border-radius: 6px; }
  </style>
</head>
<body>
  <div id="cadre">
    <div id="cible">Zone bleue <span>avec un enfant</span></div>
  </div>
  <pre id="sortie"></pre>

  <script>
    const cible = document.querySelector("#cible");
    const compteurs = {};
    const lignes = [];
    const noter = (ev, detail = "") => {
      compteurs[ev.type] = (compteurs[ev.type] ?? 0) + 1;
      lignes.push(`${ev.type.padEnd(12)} ${detail}`);
      document.querySelector("#sortie").textContent =
        lignes.slice(-8).join("\n") + "\n\nCompteurs : " + JSON.stringify(compteurs);
    };

    // Entrer / sortir : mouseenter ne se répète pas pour les enfants, mouseover si
    cible.addEventListener("mouseenter", (ev) => noter(ev));
    cible.addEventListener("mouseleave", (ev) => noter(ev));
    cible.addEventListener("mouseover", (ev) => noter(ev, `sur <${ev.target.tagName.toLowerCase()}>`));

    // Les clics : mousedown → mouseup → click (→ dblclick au 2e clic rapide)
    cible.addEventListener("mousedown", (ev) => noter(ev, `bouton ${ev.button}`));
    cible.addEventListener("mouseup", (ev) => noter(ev));
    cible.addEventListener("click", (ev) => noter(ev, `detail = ${ev.detail}`));
    cible.addEventListener("dblclick", (ev) => noter(ev));

    // Clic droit : menu contextuel
    cible.addEventListener("contextmenu", (ev) => {
      ev.preventDefault(); // pas de menu du navigateur
      noter(ev, "menu du navigateur bloqué");
    });

    // Position, avec les touches de modification
    cible.addEventListener("mousemove", (ev) => {
      cible.firstChild.textContent = `x = ${ev.offsetX}, y = ${ev.offsetY}${ev.shiftKey ? " (Maj)" : ""} `;
    });
  </script>
</body>
</html>

Après une entrée dans la zone, un passage sur l'enfant, un double-clic puis un clic droit

• Un clic produit mousedown, mouseup, puis click; un double-clic produit deux click puis un dblclick.
• Dans les compteurs, mouseenter n'a été déclenché qu'une fois, alors que mouseover l'a été trois fois : il se redéclenche en passant sur l'enfant. Pour un effet de survol, préférez mouseenter/mouseleave.
• ev.button: 0 = gauche, 1 = milieu, 2 = droit. contextmenu permet de remplacer le menu du clic droit.
• Position : offsetX/Y dans l'élément, clientX/Y dans la fenêtre, pageX/Y dans la page entière.

2. Le clavier

📄 l3_clavier.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <style>
    #touche { font-size: 42px; font-weight: 700; text-align: center; padding: 16px; background: #263238; color: #fff; border-radius: 10px; }
  </style>
</head>
<body>
  <p>Appuyez sur des touches (essayez Ctrl + S, les flèches, Échap, Maj + A).</p>
  <div id="touche">…</div>
  <pre id="sortie"></pre>

  <script>
    const lignes = [];
    document.addEventListener("keydown", (ev) => {
      // ev.key  : le CARACTÈRE ou le nom de la touche ("a", "A", "Enter", "ArrowLeft", "Escape")
      // ev.code : la POSITION physique sur le clavier ("KeyQ" pour la touche A d'un clavier AZERTY)
      const mods = ["ctrlKey", "shiftKey", "altKey", "metaKey"].filter((m) => ev[m]).map((m) => m.replace("Key", ""));
      document.querySelector("#touche").textContent = ev.key === " " ? "Espace" : ev.key;

      // Raccourci clavier : Ctrl + S (ou Cmd + S sur Mac)
      if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === "s") {
        ev.preventDefault(); // empêche « Enregistrer la page sous »
        lignes.push("→ raccourci Ctrl + S intercepté : brouillon enregistré");
      }
      if (ev.key === "Escape") lignes.push("→ Échap : on fermerait une fenêtre modale");

      lignes.push(`key = ${JSON.stringify(ev.key).padEnd(12)} code = ${ev.code.padEnd(12)} ` +
                  `${mods.length ? "+ " + mods.join(" + ") : ""}${ev.repeat ? " (répétée)" : ""}`);
      document.querySelector("#sortie").textContent = lignes.slice(-9).join("\n");
    });
  </script>
</body>
</html>

Après les touches a, Maj + A, ←, Ctrl + S et Échap

• ev.key donne le caractère ou le nom de la touche ("a", "A", "Enter", "ArrowLeft", "Escape") : c'est presque toujours ce qu'il faut tester.
• ev.code donne la position physique : sur un clavier AZERTY, la touche A a pour code "KeyQ". Utile pour les jeux (touches ZQSD/WASD).
• ctrlKey, shiftKey, altKey, metaKey (touche Cmd sur Mac) indiquent les touches de modification ; repeat, une touche maintenue.
• Pour un raccourci comme Ctrl + S, preventDefault() empêche l'action du navigateur (« Enregistrer sous »).

← 13.2 Les gestionnaires d'événements : addEventListener et l'objet Event13.4 La propagation des événements : bubbling, capture et stopPropagation →