JavaScript Academy · Leçon

Événements clavier et souris

Gérez les clics, les pressions de touches et les événements de pointeur.

Événements clavier et souris est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Familles d’événements input

Les événements de la souris et du clavier vous permettent de créer des interactions riches. Chaque famille possède des types et des propriétés d’événement spécialisés.

L’événement de clic

click se déclenche lors d’un appui-relâchement principal. Il se déclenche également lors de l’activation au clavier des boutons et des liens, ce qui améliore l’accessibilité.

btn.addEventListener("click", () => {
  console.log("activated");
});

Double clic et menu contextuel

dblclick se déclenche lors d’un double clic, tandis que contextmenu se déclenche lors d’un clic droit, souvent annulé pour afficher un menu personnalisé.

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

Appui, relâchement et mouvement de la souris

Ces événements offrent un contrôle précis : appui, relâchement et mouvement. Ils sont les éléments de base des interactions de glissement.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

Entrée dans la zone ou survol

mouseenter ne se propage pas et ignore les limites des éléments enfants, tandis que mouseover se propage et se déclenche lorsque le pointeur se déplace sur des descendants. Pour le survol, mouseenter est généralement l’événement à utiliser.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Quel bouton de la souris

La propriété button indique quel bouton a déclenché l’événement : 0 pour le bouton gauche, 1 pour le bouton central et 2 pour le bouton droit.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

Enfoncement et relâchement d’une touche

keydown se déclenche lorsqu’une touche est enfoncée et se répète tant qu’elle reste maintenue ; keyup se déclenche lorsqu’elle est relâchée. keypress est obsolète.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key correspond à la valeur logique de la touche : un caractère comme "a" ou un nom comme "Enter", "Escape" ou "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code correspond à l’emplacement physique de la touche, comme "KeyA" ou "Space", indépendamment de la disposition du clavier. Utilisez-le pour les commandes d’un jeu.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Raccourcis clavier

Combinez les indicateurs de modification avec key pour détecter les raccourcis, puis appelez preventDefault pour remplacer le comportement par défaut du navigateur.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

Répétition des touches maintenues

e.repeat vaut true lorsqu’un keydown se déclenche parce que la touche est maintenue, ce qui vous permet d’ignorer les répétitions automatiques.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Vérification rapide

Choisissez la propriété indépendante de la disposition du clavier.

Récapitulatif

Les événements de la souris comprennent click, dblclick, mousedown/mouseup/mousemove, ainsi que mouseenter/mouseleave, adaptés au survol ; button indique quel bouton a été utilisé. Les événements du clavier utilisent keydown/keyup, avec e.key pour le caractère ou le nom, e.code pour la touche physique et e.repeat pour les touches maintenues.

Questions Fréquemment Posées

La leçon « Événements clavier et souris » est-elle gratuite ?

Oui — le texte complet de « Événements clavier et souris » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Événements clavier et souris » ?

Gérez les clics, les pressions de touches et les événements de pointeur. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Événements clavier et souris » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy