Événements JavaScript et pages interactives

Une page peut attendre qu’une personne agisse. Un événement signale ce qui s’est passé et un écouteur d’événements est la fonction appelée en réponse. Enregistrer un écouteur prépare cette réponse ; cela n’effectue pas l’action immédiatement.

Ajouter la fonction à l’élément

Sélectionne un élément qui existe déjà, choisis le nom exact de l’événement et passe une fonction :

const button = document.querySelector("#like");
let likes = 0;
button.addEventListener("click", function () {
  likes = likes + 1;
  button.textContent = "Likes: " + likes;
});

La sélection, la définition de la variable et l’enregistrement s’exécutent lorsque le script s’exécute. Chaque clic ultérieur exécute le corps de la fonction. Après trois clics, le bouton affiche « Likes: 3 ». Garder likes hors de la fonction conserve le total entre les clics ; placer let likes = 0 à l’intérieur le remettrait à zéro à chaque fois.

Passe une référence de fonction, comme showMenu, sans parenthèses. Dans button.addEventListener("click", showMenu()), JavaScript appelle immédiatement showMenu et passe sa valeur de retour comme écouteur. Pour fournir un argument plus tard, place l’appel dans une fonction enveloppante : button.addEventListener("click", () => showMenu("main"));.

Choisir un événement qui se produit réellement

Les noms sont des chaînes sensibles à la casse sans préfixe « on ». Utilise "click", et non "Click" ou "onclick". Un nom inventé est accepté sans erreur, mais le navigateur ne l’émettra pas pour un clic. Parmi les familles courantes figurent les événements de pointeur comme pointerdown et pointerup, les événements clavier comme keydown, les événements de formulaire comme input et submit, et les événements de focus comme focusin. DOMContentLoaded possède sa propre casse exacte.

Configurer le bon élément au bon moment

Un script dans l’en-tête peut s’exécuter avant qu’un bouton existe. La sélection renvoie alors null, et appeler addEventListener sur cette valeur provoque une erreur. Charge un script externe avec defer, place-le après le balisage ou enregistre la mise en place sur l’événement DOMContentLoaded du document. Un élément créé plus tard nécessite une mise en place après sa création ou un écouteur sur un ancêtre.

querySelectorAll renvoie une NodeList, et non une seule cible d’événement. Enregistre les écouteurs sur ses éléments :

document.querySelectorAll(".tab").forEach((tab) => {
  tab.addEventListener("click", selectTab);
});

Faire coexister les écouteurs

Les écouteurs ayant le même réglage de capture s’exécutent dans leur ordre d’enregistrement. Sur la cible de l’événement, les écouteurs en phase de capture s’exécutent avant les autres. Ajouter de nouveau le même objet fonction avec le même type et le même réglage de capture n’en ajoute pas un second exemplaire.

Le navigateur passe un objet événement à ton écouteur. Ses propriétés expliquent l’événement qui a déclenché cet appel précis. Nomme le paramètre event ou e ; le choix de son nom t’appartient.

button.addEventListener("click", (event) => {
  console.log(event.type);
  console.log(event.currentTarget);
});

Ce code affiche "click" et le bouton dans la console pendant l’appel de l’écouteur. Afficher l’objet entier peut t’aider à découvrir ses autres propriétés.

Distinguer l’origine de l’écouteur

Imagine un bouton contenant une image :

<button id="save" data-id="7">
  <img src="disk.svg" alt=""> Save
</button>

Un clic sur le texte « Save » fait aussi du bouton la cible. Le texte fait partie du bouton ; il ne devient pas un élément cible distinct.

Cette différence compte pour lire les données. L’image n’a pas le data-id du bouton : event.target.dataset.id vaut donc undefined lors d’un clic sur l’image. Un écouteur ajouté directement au bouton peut lire event.currentTarget.dataset.id. Un écouteur sur un conteneur plus grand peut trouver le bouton recherché avec event.target.closest("button") et vérifier qu’un élément correspondant existe.

Lire les détails de cet événement

Chaque événement possède un type, un target et un currentTarget. Le booléen bubbles indique s’il remonte à travers les ancêtres. cancelable indique si le code peut annuler son action par défaut, et defaultPrevented indique si cette annulation a eu lieu. timeStamp indique l’instant de création de l’événement en millisecondes par rapport à l’origine temporelle de la page.

Les différentes familles d’événements ajoutent des détails utiles. Un click moderne fournit un PointerEvent, qui hérite des propriétés d’événement de souris comme clientX, clientY et button. Un KeyboardEvent ajoute key, code et des indicateurs de touches de modification. Un écouteur input peut utiliser event.target.value pour lire le nouveau texte du champ.

Pour un écouteur sur une galerie, event.target.tagName peut valoir "IMG" lors d’un clic sur une photo ou "DIV" lors d’un clic dans l’espace entre les photos. Gère le cas effectivement indiqué. Ne suppose pas que tous les événements dans un conteneur proviennent du même type d’enfant.

Utiliser la valeur pendant l’exécution de l’écouteur

Dans un écouteur écrit avec une fonction classique, this est égal à event.currentTarget. Une fonction fléchée prend this dans le code qui l’entoure ; elle ne prend pas l’élément comme this. L’utilisation de event.currentTarget fonctionne avec les deux formes de fonction.

Après le déclenchement, currentTarget est remis à null. Une console peut afficher cette valeur ultérieure lorsque tu développes un événement affiché auparavant. Affiche event.currentTarget directement dans l’écouteur pour examiner l’élément pendant l’appel.

Un écouteur doit rester actif tant que sa fonctionnalité en a besoin. Pour une interaction temporaire au clavier, garde la référence de la fonction afin de pouvoir la supprimer lorsque l’interaction se termine.

Supprimer la même fonction

function onKey(event) {
  console.log(event.key);
}
document.addEventListener("keydown", onKey);
// When the feature closes:
document.removeEventListener("keydown", onKey);

La suppression recherche le même type d’événement, le même objet fonction et le même réglage de capture. Une fonction anonyme peut aussi être supprimée lorsque sa référence est enregistrée, comme dans const handler = () => save();. Écrire un nouveau () => save() dans l’appel de suppression crée une fonction différente, même si le code semble identique.

Choisir les options d’enregistrement

Une bannière de bienvenue à affichage unique peut utiliser { once: true }. Une fonctionnalité avec plusieurs écouteurs peut leur donner un même signal :

const controller = new AbortController();
window.addEventListener("pointermove", moveCursor, {
  signal: controller.signal
});
window.addEventListener("keydown", onKey, {
  signal: controller.signal
});
// Close the feature:
controller.abort();

L’annulation supprime les deux enregistrements. Un contrôleur annulé ne peut pas être réinitialisé ; crée un nouveau contrôleur pour une nouvelle période d’utilisation. Pour une suppression avec removeEventListener, répète capture: true si ce réglage a été utilisé lors de l’enregistrement. once, signal et passive ne font pas partie des critères de correspondance pour la suppression.

L’appel de preventDefault() par un écouteur passif est ignoré. Les navigateurs rendent couramment passifs par défaut certains écouteurs liés au défilement sur les cibles au niveau du document, notamment pour wheel, touchstart et touchmove ; utilise explicitement { passive: false } dans ces cas lorsqu’une annulation est nécessaire.

Éviter l’accumulation de fonctions de rappel

Si chaque clic sur « Start » ajoute un nouvel écouteur anonyme au plateau, deux démarrages font qu’un clic sur le plateau exécute deux fonctions de rappel. Installe l’écouteur du plateau une seule fois, réutilise le même objet fonction ou annule le groupe précédent avant de le remplacer. Des fonctions de rappel once distinctes peuvent quand même s’accumuler avant leur exécution.

Détacher un élément conserve ses écouteurs. Ils fonctionnent s’il est réinséré, et dispatchEvent() peut les atteindre lorsqu’il est détaché. Le ramasse-miettes peut récupérer l’élément lorsque celui-ci et ses écouteurs ne sont plus accessibles. Un écouteur sur window ou document reste en place jusqu’à sa suppression explicite.

Envoyer un événement personnalisé

const event = new CustomEvent("cart:add", {
  detail: { id: 42 },
  bubbles: true
});
item.dispatchEvent(event);

Les écouteurs lisent event.detail.id. Le déclenchement appelle immédiatement les écouteurs, avant de rendre la main. bubbles: true permet aussi aux ancêtres de recevoir l’événement. Un événement envoyé avec dispatchEvent() a isTrusted égal à false ; les événements déclenchés par le navigateur peuvent être considérés comme fiables même lorsqu’une API comme focus() les a provoqués.

Un clic dans un bouton peut aussi être reçu par les ancêtres du bouton. La propagation est le trajet de l’événement dans l’arbre du document. Suivre ce trajet permet de comprendre aussi bien les écouteurs partagés utiles que les actions supplémentaires surprenantes.

Suivre trois phases

1. Capture : l’événement descend depuis window à travers les ancêtres vers la cible.
2. Cible : les écouteurs s’exécutent sur l’élément où l’événement a commencé.
3. Bouillonnement : un événement qui remonte par bouillonnement traverse les ancêtres jusqu’à window.

La propriété eventPhase indique 1 pour la capture, 2 sur la cible et 3 pour le bouillonnement. Un écouteur enregistré sans options s’exécute sur la cible ou pendant la remontée. Un écouteur avec { capture: true } s’exécute pendant la descente, y compris sur la cible s’il y est enregistré.

Suivre un clic concret

<div id="outer">
  <div id="inner">
    <button>Go</button>
  </div>
</div>

Supposons que le bouton et chaque div aient des écouteurs de clic ordinaires qui affichent leur nom. Un clic sur « Go » affiche « button », « inner », puis « outer ». Un clic sur une zone vide de inner affiche « inner », puis « outer » ; le bouton ne se trouve pas sur le trajet de cet événement.

Ajoute maintenant un écouteur en phase de capture à outer. Un clic sur le bouton affiche d’abord « outer (capture) », puis « button », « inner » et « outer » depuis les écouteurs ordinaires. L’écouteur en phase de capture reçoit le clic avant les descendants. Après outer, l’événement peut continuer à travers body, html, document et window si des écouteurs y sont enregistrés.

Il s’agit d’un seul événement, pas d’un nouveau clic créé sur chaque ancêtre. target reste le bouton tout au long du trajet. currentTarget change à mesure que chaque écouteur s’exécute. Dans l’écouteur de l’élément extérieur, lire target indique toujours le bouton d’origine.

Vérifier quels événements remontent par bouillonnement

La propriété bubbles de l’événement indique s’il possède une phase de bouillonnement. Les événements sans bouillonnement peuvent quand même être observés par un écouteur en phase de capture sur un ancêtre. Pour gérer les changements de focus au moyen d’un écouteur ordinaire sur un conteneur, choisis focusin ou focusout.

Expliquer un bogue lié à des actions imbriquées

Une fiche produit ouvre une vue détaillée lorsqu’on clique dessus. Son bouton « Supprimer » supprime le produit. Un clic sur ce bouton supprime d’abord le produit, puis atteint l’écouteur de la fiche et ouvre la vue détaillée. Le trajet de l’événement explique pourquoi les deux fonctions de rappel s’exécutent.

La fiche peut ignorer les clics de suppression avec if (event.target.closest(".remove")) return;. Le bouton peut aussi arrêter la propagation. Filtrer au niveau de la fiche conserve l’événement pour les autres ancêtres qui peuvent en avoir besoin.

Un écouteur peut modifier ce qui se passe après un événement ou le trajet que suit l’événement. Ce sont deux décisions distinctes. Un événement sur un lien peut continuer à remonter par bouillonnement même après l’annulation de la navigation.

Remplacer une action du navigateur

Une action par défaut est un comportement fourni par le navigateur : suivre un lien, envoyer un formulaire, changer l’état d’une case à cocher, insérer du texte, faire défiler avec Espace ou déplacer le focus avec Tabulation. Utilise preventDefault() lorsque ton code remplace cette action :

help.addEventListener("click", (event) => {
  event.preventDefault();
  openHelpPanel();
});

Pour un lien vers /help, ce code ouvre le panneau sans naviguer vers une autre page. Le lien donne toujours accès à sa destination lorsque JavaScript ne s’exécute pas.

Seuls les événements annulables peuvent être annulés. Examine event.cancelable ; defaultPrevented indique si l’annulation a réussi. input se produit après le changement de valeur et n’est pas annulable. Y appeler preventDefault() ne supprime pas le texte inséré. Un événement beforeinput annulable est le bon endroit pour intercepter une modification ; annuler un événement keydown approprié peut empêcher l’effet par défaut de cette touche.

Contrôler la propagation séparément

Un lien dont l’écouteur ne fait qu’arrêter la propagation est quand même suivi. Annuler uniquement la navigation permet toujours à un écouteur de clic sur le document de recevoir l’événement. Renvoyer false depuis une fonction de rappel ajoutée avec addEventListener ne fait ni l’un ni l’autre. Une propriété ou un attribut en ligne de gestionnaire peut annuler l’action par défaut en renvoyant false, mais cela n’arrête toujours pas la propagation.

Préserver les comportements partagés

Un ancêtre peut fermer un menu ou compter les interactions. Arrêter la propagation cache l’événement à ce code. L’ancêtre peut souvent examiner target ou defaultPrevented à la place.

Par exemple, un menu ne se ferme que lorsqu’un clic a lieu en dehors du menu et de son élément déclencheur :

document.addEventListener("click", (event) => {
  if (!menu.contains(event.target) &&
      !menuButton.contains(event.target)) {
    menu.hidden = true;
  }
});

contains() inclut l’élément lui-même et ses descendants. Il est important de vérifier l’élément déclencheur, car le clic qui ouvre le menu remonte aussi par bouillonnement jusqu’au document. Sans ce second test, le menu qui vient de s’ouvrir se fermerait immédiatement.

N’annuler qu’une action prise en charge

Dans un écouteur de touche, vérifie la touche avant d’annuler son action. Annuler chaque touche bloque la saisie ordinaire et peut empêcher Tabulation de déplacer le focus. Dans un écouteur passif, l’annulation est entièrement ignorée.

La délégation d’événements place un écouteur sur un ancêtre stable et utilise l’origine de l’événement pour choisir une action. Elle est utile lorsqu’une liste comporte de nombreux éléments ou lorsque le code en crée de nouveaux après la mise en place.

Trouver le composant recherché

Un clic qui remonte par bouillonnement atteint la liste quel que soit le descendant sur lequel l’utilisateur a cliqué. Pars de event.target, trouve le composant correspondant le plus proche et ignore les clics sans rapport :

const list = document.querySelector("#todos");
list.addEventListener("click", (event) => {
  const button = event.target.closest(".remove");
  if (!button || !list.contains(button)) return;
  const item = button.closest("li");
  console.log("Removing item " + item.dataset.id);
  item.remove();
});

La liste contient des éléments comme <li data-id="7">Buy milk <button class="remove">Remove</button></li>. L’écouteur appartient à la liste : un nouvel élément avec le même balisage fonctionne donc dès son insertion.

Suis un clic sur une icône dans le code. La cible est l’icône, closest(".remove") trouve son bouton et button.closest("li") trouve l’élément de liste. Son data-id identifie l’élément dans le message. Enfin, remove() modifie la page.

Conserver les deux vérifications

Tester seulement event.target.matches(".remove") ne prend pas en compte les clics sur l’icône, car l’icône elle-même ne correspond pas au sélecteur. closest() vérifie la cible et remonte ses ancêtres. Dans un écouteur délégué, currentTarget est la liste ; il ne devient pas le bouton trouvé.

Diriger plusieurs actions

Les attributs de données permettent à un écouteur de barre d’outils de choisir parmi des actions connues :

const actions = { bold: makeBold, italic: makeItalic,
  clear: clearText };
toolbar.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button || !toolbar.contains(button)) return;
  const action = actions[button.dataset.action];
  if (typeof action === "function") action();
});

Un bouton avec data-action="clear" sélectionne clearText. La vérification de la fonction gère une action inconnue sans tenter d’appeler undefined.

Choisir un événement adapté

La délégation fonctionne avec d’autres événements qui remontent par bouillonnement, pas seulement les clics. Un seul écouteur input sur un formulaire peut passer event.target à une fonction de vérification des champs. Pour déléguer les changements de focus, utilise focusin ou focusout ; les événements ordinaires focus et blur ne remontent pas. Pour les changements de survol, utilise les événements over/out qui remontent lorsque la délégation est nécessaire.

Un appel à stopPropagation() sur un descendant peut empêcher un événement d’atteindre le conteneur. Si un écouteur délégué semble inactif, vérifie le type d’événement, la cible, la correspondance avec le sélecteur et si un élément situé sous le conteneur a arrêté la propagation.

Les entrées au clavier vont à l’élément qui a le focus, accessible sous document.activeElement, puis remontent par bouillonnement. Un écouteur sur le document peut donc recevoir les touches depuis les champs comme depuis les autres composants. Cette portée rend les raccourcis clavier utiles, mais signifie aussi qu’ils peuvent interrompre la saisie.

Choisir la propriété selon son sens

Sur un clavier AZERTY, la touche à l’emplacement marqué Q sur un clavier américain produit key "a" et code "KeyQ". Utilise key pour le sens, comme Échap pour fermer ou une lettre pour un raccourci. Utilise code pour les positions fixes, comme les touches de déplacement dans un jeu. Le key de la barre d’espace est un seul espace, pas "Space".

keydown se déclenche à l’appui initial et peut se répéter tant que la touche reste enfoncée. Lors des appels répétés, event.repeat === true. keyup se déclenche au relâchement. Utilise keydown à la place de l’événement obsolète keypress.

Gérer un raccourci précisément

document.addEventListener("keydown", (event) => {
  if ((event.ctrlKey || event.metaKey) &&
      event.key.toLowerCase() === "s") {
    event.preventDefault();
    saveDraft();
  }
});

Ce code gère Ctrl+S et Commande+S. La conversion en minuscules permet aussi d’accepter "S". L’annulation ne remplace l’action d’enregistrement de la page du navigateur que pour le raccourci correspondant. Parmi les autres indicateurs de touches de modification figurent shiftKey et altKey.

Pour un raccourci à une seule lettre actif sur toute la page, ignore les contextes de saisie avant d’agir :

if (event.target.matches("input, textarea, select") ||
    event.target.isContentEditable) return;
if (event.repeat) return;

La première vérification protège la saisie de texte. La seconde fait exécuter une action une seule fois par appui physique. N’annule pas Tabulation dans toute la page : c’est ainsi que les utilisateurs du clavier passent à la suite.

Écouter le texte après sa modification

Pour une touche ordinaire produisant un caractère affichable, la séquence est keydown, beforeinput, input, puis keyup. Lire value dans keydown donne la valeur avant l’insertion de ce caractère. Utilise input pour un aperçu du texte ou un compteur de caractères. Cet événement prend aussi en compte les modifications comme le collage et la dictée, qui ne nécessitent pas d’appui correspondant sur une touche.

Observer les changements de focus

focus et blur signalent la prise et la perte du focus sans remonter par bouillonnement. focusin et focusout remontent : un formulaire peut donc observer ses champs avec un seul écouteur. relatedTarget indique l’autre élément concerné par le changement, ou null s’il n’y en a pas.

password.addEventListener("focus", () => {
  hint.hidden = false;
});
password.addEventListener("blur", () => {
  hint.hidden = true;
});

L’indication est disponible lorsque le champ reçoit le focus, notamment avec Tabulation. Appeler element.focus() déplace le focus depuis le code ; la prochaine entrée au clavier va alors à cet élément.

Une personne peut utiliser une souris, un doigt, un stylet ou un clavier. Choisis un événement selon l’interaction souhaitée. click exprime une activation ; les événements de pointeur décrivent l’appui, le mouvement et le relâchement.

Garder les actions accessibles au clavier

Un bouton natif émet click lorsqu’il est activé avec Entrée ou Espace. Un lien qui a le focus fait de même avec Entrée. Relier une action uniquement à pointerdown ou mousedown ne prend pas en compte ces activations au clavier. Utilise click pour les actions comme l’ouverture d’un panneau ; utilise pointerdown lorsque le travail doit commencer dès l’appui, comme pour un glissement.

Un clic au pointeur suit un appui et un relâchement. Lorsqu’ils ont lieu sur des éléments différents, le clic peut avoir pour cible leur ancêtre commun le plus proche. dblclick suit deux clics rapides ; event.detail compte les clics rapides successifs. auxclick gère les clics non principaux. contextmenu peut provenir d’un clic secondaire, d’un appui tactile long ou d’une commande de menu au clavier.

Utiliser une seule famille d’événements de pointeur

pointerdown, pointermove, pointerup et pointercancel couvrent la souris, le tactile et le stylet. pointerType indique l’appareil par "mouse", "touch" ou "pen" ; pointerId distingue les pointeurs actifs, y compris deux doigts.

Les anciennes familles d’événements de souris et tactiles existent toujours. Les navigateurs peuvent émettre des événements de souris de compatibilité après les événements de pointeur. Enregistrer à la fois pointerdown et mousedown pour la même action peut donc l’exécuter deux fois.

Adapter les coordonnées au besoin

Lorsque le document a défilé de 300 px vers le bas et qu’un clic a lieu à 100 px sous le haut de la zone d’affichage, clientY vaut 100 et pageY vaut 400. Garde les deux positions dans le même repère de coordonnées pour calculer le mouvement. Si la cible imbriquée change, l’origine des coordonnées de décalage peut aussi changer.

button indique quel bouton a changé d’état lors d’un événement d’appui ou de relâchement : 0 pour le principal, 1 pour celui du milieu, 2 pour le secondaire. buttons indique la combinaison actuellement enfoncée : le bouton principal contribue pour 1, le secondaire pour 2 et celui du milieu pour 4. Ainsi, buttons === 3 signifie que les boutons principal et secondaire sont enfoncés ; cela ne signifie pas que le bouton du milieu a changé d’état.

Choisir le comportement de survol pour un composant entier

Les événements over/out remontent par bouillonnement et peuvent se déclencher lorsque le pointeur franchit les frontières des éléments enfants. Les événements enter/leave ne remontent pas et décrivent l’entrée dans l’élément entier ou sa sortie, enfants compris. Une infobulle peut éviter de clignoter au passage des frontières des enfants avec pointerenter et pointerleave.

Les utilisateurs d’écrans tactiles et de claviers ne survolent pas les éléments. Propose aussi les informations essentielles au clic ou à la prise de focus. Pour un effet de survol visuel sans comportement supplémentaire, le sélecteur CSS :hover est plus simple qu’un écouteur.

Un glissement nécessite de conserver des informations entre plusieurs événements. Stocke les coordonnées de départ du pointeur et la position de départ de l’élément. Chaque mouvement applique ensuite la différence depuis ce point de départ, afin que l’élément ne saute pas pour placer son coin sous le pointeur.

Calculer le déplacement

Une boîte commence à left: 100px; top: 50px. Le pointeur part des coordonnées 220, 140 dans la zone d’affichage et se déplace jusqu’à 260, 125. Le déplacement horizontal est de 40 px ; le déplacement vertical est de −15 px. En ajoutant ces déplacements à la position de départ de la boîte, on obtient left: 140px; top: 35px.

Utilise des coordonnées dans la zone d’affichage cohérentes pour les deux relevés du pointeur. Le calcul général est la position de départ de l’élément plus le déplacement du pointeur. N’ajoute pas chaque déplacement complet à la position déjà mise à jour de la boîte, car cela compterait à nouveau les mouvements précédents.

Mémoriser et capturer un pointeur

Pour une boîte sans marge, positionnée de façon absolue dans un conteneur positionné de façon relative :

let start = null;
box.addEventListener("pointerdown", (event) => {
  if (start || event.button !== 0) return;
  start = { id: event.pointerId, x: event.clientX,
    y: event.clientY, left: box.offsetLeft,
    top: box.offsetTop };
  box.setPointerCapture(event.pointerId);
});
box.addEventListener("pointermove", (event) => {
  if (!start || event.pointerId !== start.id) return;
  box.style.left = start.left +
    (event.clientX - start.x) + "px";
  box.style.top = start.top +
    (event.clientY - start.y) + "px";
});
function endDrag(event) {
  if (start && event.pointerId === start.id) start = null;
}
box.addEventListener("pointerup", endDrag);
box.addEventListener("pointercancel", endDrag);

L’identifiant stocké permet d’ignorer les mouvements et le relâchement d’un second pointeur. offsetLeft et offsetTop fournissent les positions de départ sous forme de nombres ; les styles nécessitent le suffixe "px".

La capture du pointeur maintient les événements suivants de ce pointeur dirigés vers la boîte, même lorsque le pointeur sort de celle-ci. Le navigateur libère la capture après le relâchement ou l’annulation du pointeur. releasePointerCapture(id) peut la libérer plus tôt.

Gérer la reprise en main par le navigateur

Un geste tactile peut devenir un défilement de la page ou un zoom, ce qui provoque pointercancel. Termine aussi le glissement à ce moment-là, comme pour pointerup ; sinon, un état périmé peut continuer à déplacer la boîte plus tard. Applique touch-action: none à la surface de glissement avant l’interaction pour réserver ce geste. Limite cette règle à cette surface afin que le reste de la page puisse défiler.

Utilise user-select: none sur la surface déplaçable pour éviter de sélectionner du texte. Définis draggable="false" sur ses images pour empêcher le comportement natif de glissement d’image.

Proposer un autre moyen de déplacer

Prévois le déplacement au clavier pour un composant qui a le focus et des boutons de déplacement sur lesquels cliquer ou appuyer. Les touches fléchées seules ne fournissent pas d’alternative à pointeur unique au glissement. Le critère de succès 2.5.7 des WCAG 2.2 exige une telle alternative, sauf si le glissement est essentiel ou relève d’un comportement du navigateur non modifié. Des boutons de déplacement natifs peuvent convenir aux utilisateurs du clavier comme du pointeur.

L’API HTML Drag and Drop, distincte, utilise dragstart, dragover et drop pour transférer des données, comme des fichiers. Sa séquence d’événements diffère de ce changement de position fondé sur le pointeur.

Les composants de formulaire exposent différents types d’état. La propriété value d’un champ de texte est une chaîne ; la propriété checked d’une case à cocher est un booléen. Lire la bonne propriété est la première étape pour obtenir des calculs et des aperçus fiables.

Convertir les nombres volontairement

Même <input type="number"> possède une value qui est une chaîne. Avec le texte "3", ajouter 1 donne "31". Number(input.value) + 1 donne 4. Un champ numérique expose aussi valueAsNumber.

Une entrée vide nécessite une décision particulière. Number("") donne 0, ce qui peut faire passer une quantité manquante pour un vrai zéro. Vérifie d’abord input.value === "", ou utilise valueAsNumber, qui donne NaN pour un champ numérique vide. Teste ce résultat avec Number.isNaN().

Lire l’état sélectionné

La propriété value d’une case à cocher est le texte configuré pour son envoi, ou "on" si aucun n’est fourni. Elle n’indique pas si la case est cochée. Une liste déroulante indique la valeur de l’option choisie. Pour trouver l’élément radio sélectionné lui-même, recherche input[name="size"]:checked.

Adapter l’événement à la mise à jour

input signale les modifications de l’utilisateur au fur et à mesure, y compris la saisie et le collage. change signale un choix validé : après la perte de focus d’un champ de texte modifié, ou immédiatement lorsqu’une case à cocher, un bouton radio ou une liste déroulante change.

message.addEventListener("input", () => {
  counter.textContent = 280 - message.value.length +
    " characters left";
});

Après « Hello », cinq caractères ont été utilisés et le compteur affiche « 275 characters left ». Un écouteur keydown s’exécuterait avant l’insertion du nouveau caractère dans la valeur et ne détecterait pas un collage effectué par un menu. Affecter message.value depuis le code ne déclenche ni input ni change ; appelle aussi directement la fonction de mise à jour.

Recueillir les champs nommés d’un formulaire

form.elements.email.value donne accès à un composant par son nom ou son identifiant. Utilise form.elements["first-name"] pour un nom contenant un trait d’union. La soumission utilise les noms : un identifiant seul n’inclut pas un champ dans les données.

const data = new FormData(form);
const email = data.get("email");
const topics = data.getAll("topics");

FormData recueille les paires nom-valeur actuelles admissibles. Les cases non cochées, les composants désactivés et les champs sans nom sont exclus. get() renvoie la première valeur pour un nom ; getAll() conserve les valeurs répétées, comme plusieurs sujets cochés. Les champs de fichier peuvent fournir des objets fichier ; les champs de texte ordinaires fournissent des chaînes.

Object.fromEntries(data) est pratique pour des noms distincts, mais ne garde que la dernière paire lorsque des noms sont répétés. Choisis getAll() lorsque chaque sélection compte. Comme input remonte par bouillonnement, un seul écouteur sur le formulaire peut lire event.target pour mettre à jour le champ qui a changé.

La soumission appartient au formulaire. Écoute son événement submit pour gérer par une seule voie un clic sur un bouton de soumission, un appui sur Entrée dans un champ sur une seule ligne et un appel de requestSubmit() par script.

Remplacer la navigation par une mise à jour de la page

Normalement, un formulaire envoie des données à l’URL de son action et charge la réponse. Sans action, la destination est la page actuelle. La méthode GET par défaut place les données dans l’URL. Pour mettre à jour la page actuelle avec JavaScript, annule cette action par défaut :

const form = document.querySelector("#new-todo");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const title = data.get("title").trim();
  if (title === "") return;
  addTodo(title);
  form.reset();
});

Ce formulaire possède un champ de texte activé nommé title. L’écouteur supprime les espaces au début et à la fin, ignore un résultat vide, ajoute un élément et rétablit les valeurs initiales des champs. reset() ne signifie pas toujours vider : un composant ayant une valeur initiale retrouve cette valeur.

Si l’élément apparaît brièvement puis disparaît lorsque la page se recharge, vérifie si preventDefault() a été oublié. Un écouteur de clic sur le bouton seul n’est pas le bon endroit pour gérer le formulaire, surtout lorsqu’une autre voie permet de le soumettre.

Comprendre ce qui déclenche la soumission

La soumission implicite par Entrée peut cliquer sur le bouton de soumission par défaut s’il est activé. Dans une zone de texte, Entrée insère une nouvelle ligne. Un bouton dans un formulaire est par défaut un bouton de soumission lorsque son type est omis : un bouton « Afficher le mot de passe » doit donc utiliser explicitement type="button".

Lorsqu’il y a plusieurs boutons de soumission, event.submitter indique celui qui a été utilisé. Il peut valoir null pour les voies sans bouton précis : le code doit donc le vérifier avant de le lire :

const button = event.submitter;
const intent = button ? button.value : "save";
const data = button ? new FormData(form, button) :
  new FormData(form);

Un bouton de soumission nommé, comme name="intent" value="publish", ajoute cette paire lorsqu’il est passé à FormData. Un appel à FormData(form) seul n’inclut pas la paire nom-valeur d’un bouton de soumission.

Préserver le parcours de validation

La validation intégrée s’exécute avant l’événement de soumission. Si un champ obligatoire vide ne passe pas la validation, le navigateur signale le problème et ne déclenche pas submit. Une vérification personnalisée placée uniquement dans cet écouteur ne s’exécutera pas lors de cette tentative échouée. novalidate sur le formulaire désactive l’étape de validation automatique.

Utilise requestSubmit() lorsque le code a besoin du parcours normal de validation et de l’événement de soumission. Cette méthode demande la soumission sans déclencher de clic sur un bouton. Passe un bouton de soumission précis à requestSubmit(button) lorsque les paramètres de soumission de ce bouton doivent s’appliquer.

HTML peut décrire de nombreuses règles de saisie sans test JavaScript personnalisé. Le navigateur vérifie ces règles lors de la soumission et expose les résultats à ton code. Commence par les contraintes qui correspondent aux données dont tu as besoin.

Choisir une contrainte

Pour pattern="[0-9]{5}", « 12345 » est accepté ; « 1234 », « 123456 » et « 12345a » sont refusés. Le motif couvre toute la valeur, pas une simple partie correspondante. Une entrée vide ignore la vérification du motif : ajoute donc required lorsque l’omission n’est pas autorisée.

La validation d’une adresse e-mail vérifie sa syntaxe, pas l’existence d’une boîte de réception. « ann@example.com » et « ann@example » respectent toutes deux la règle du navigateur, contrairement à « ann.example.com ». Un motif supplémentaire peut imposer un format plus précis si l’application l’exige.

Lire la raison de l’échec

L’objet validity d’un champ contient des indicateurs booléens. valueMissing, typeMismatch, patternMismatch, tooShort et tooLong décrivent du texte manquant ou mal formé. rangeUnderflow, rangeOverflow et stepMismatch décrivent des contraintes numériques. badInput couvre une saisie que le navigateur ne peut pas convertir en valeur exploitable, et customError indique la présence d’un message de validation personnalisé. valid est vrai lorsqu’aucune contrainte n’échoue.

Pour un champ numérique avec min="0" max="10" step="2", 12 dépasse le maximum, 7 ne respecte pas le pas autorisé et 6 est accepté. Plusieurs indicateurs peuvent être vrais ; ne suppose pas que chaque champ invalide présente exactement un problème.

Vérifier silencieusement ou signaler visiblement

checkValidity() renvoie un booléen et déclenche invalid sur les composants invalides sans afficher le message du navigateur. reportValidity() vérifie et signale aussi le problème à l’utilisateur. Appelle l’une ou l’autre méthode sur un champ ou un formulaire. validationMessage fournit le message dans la langue du navigateur. L’événement invalid ne remonte pas par bouillonnement.

Les contraintes de longueur s’appliquent au texte saisi par l’utilisateur. Affecter input.value = "ab" dans le code ne rend pas tooShort vrai simplement parce que minlength vaut 3. maxlength empêche normalement aussi l’utilisateur de saisir davantage de caractères au-delà de sa limite.

Afficher les erreurs au bon moment

:invalid s’applique immédiatement : un champ obligatoire encore intact correspond donc déjà au sélecteur. :user-invalid attend une interaction de l’utilisateur ou une tentative de soumission et peut éviter qu’un champ ne devienne rouge trop tôt. Utilise aussi du texte pour expliquer l’erreur, en plus d’un style visuel.

novalidate ignore la validation automatique du formulaire à la soumission ; formnovalidate l’ignore pour un bouton de soumission. Ces attributs ne suppriment pas les contraintes et ne désactivent pas checkValidity(). Les vérifications du navigateur aident les utilisateurs à corriger leurs erreurs ; le serveur doit valider à nouveau les données reçues, car une requête peut contourner la page.

Une règle qui concerne deux champs nécessite du code. Par exemple, une confirmation doit correspondre à un mot de passe ou une date de fin doit être postérieure à une date de début. Sépare la règle de la manière et du moment où son erreur est affichée.

Définir et effacer une erreur personnalisée

Une chaîne non vide passée à setCustomValidity() marque le champ comme invalide et définit customError. Passer "" efface cette erreur personnalisée ; les contraintes required, pattern ou d’autres contraintes peuvent toujours ne pas être respectées.

function checkMatch() {
  const matches = confirm.value === password.value;
  confirm.setCustomValidity(matches ? "" :
    "The passwords do not match.");
}
password.addEventListener("input", checkMatch);
confirm.addEventListener("input", checkMatch);

Vérifie à nouveau les deux champs dont dépend la règle. Modifier le premier mot de passe peut rendre incorrecte une confirmation auparavant correcte. Un message qui n’est jamais effacé garde le champ invalide après la correction de la différence. Exécute aussi la vérification initiale lorsque les champs peuvent contenir des valeurs dès le départ.

Les champs de date fournissent des chaînes ISO comme "2026-03-10", quel que soit le format de date local affiché. Les valeurs non vides de ces composants peuvent être comparées comme du texte. Si la règle impose que la fin soit postérieure au début, refuse end.value <= start.value, y compris l’égalité. Gère les dates manquantes avec required ou une vérification distincte des valeurs vides.

Expliquer la prochaine action utile

Un message doit indiquer le problème et sa correction. Pour une adresse e-mail manquante, indique « Saisis ton adresse e-mail. » Pour un texte d’adresse e-mail mal formé, indique « Saisis une adresse e-mail sous la forme name@example.com. » Conserve la valeur saisie pour que la personne puisse la modifier.

Un champ de nom obligatoire accepte les espaces, car ils forment une chaîne non vide. Vérifie name.value.trim() === "" lorsque les espaces en début et en fin de chaîne ne doivent pas compter. Efface cette erreur personnalisée dès qu’un texte qui a un sens apparaît.

Associer les messages aux composants

<label for="email">Email</label>
<input id="email" name="email" type="email"
  required aria-describedby="email-error">
<p id="email-error"></p>

Place l’erreur dans ce paragraphe et définis aria-invalid="true" tant que le champ présente une erreur. Efface le texte et supprime aria-invalid ou définis-le à "false" après correction. aria-describedby associe l’explication au champ pour la technologie d’assistance. Utilise du texte ; une bordure rouge seule ne permet pas à tout le monde de savoir ce qui a échoué.

Choisir le déroulement de la validation

Pour des messages entièrement personnalisés, ajoute novalidate et utilise un écouteur submit sur le formulaire. Mets à jour les règles personnalisées, examine la validité des champs, écris leurs messages et empêche la soumission si l’un d’eux est invalide. Déplace le focus vers le premier champ invalide ou vers un récapitulatif des erreurs contenant des liens. Si JavaScript gère aussi localement la soumission réussie, annule également cette soumission par défaut.

Évite de signaler un texte d’adresse e-mail incomplet dès les premières frappes. Une séquence utile consiste à afficher les erreurs après la perte de focus ou la soumission, puis à vérifier de nouveau sur input une erreur déjà signalée.

Un composant a besoin de plus que d’une réponse au clic. Les personnes doivent pouvoir le trouver, l’atteindre, comprendre son rôle, l’utiliser et voir où se trouve le focus. Le HTML natif fournit déjà une grande partie de ce comportement.

Choisir l’élément adapté

Utilise un <button> pour une action, un <a href> pour la navigation et un composant de formulaire avec un libellé pour la saisie. <details> avec <summary> fournit un composant de divulgation. Mets ces éléments en forme avec CSS pour les adapter à la page. Un bouton qui a le focus s’active avec Entrée ou Espace sans écouteur de touche supplémentaire.

Un div avec un écouteur de clic ne possède ni la sémantique intégrée du bouton ni son comportement au clavier. Lui donner role="button" change ce qu’annonce la technologie d’assistance, mais ne lui permet pas de recevoir le focus et ne transforme pas les appuis sur les touches en clics.

Garder un ordre de focus prévisible

tabindex="0" ajoute un élément à la séquence normale de tabulation selon l’ordre du document. tabindex="-1" permet de donner le focus par le code sans ajouter d’arrêt de tabulation. Les valeurs positives placent les éléments avant la séquence habituelle et sont difficiles à maintenir ; évite-les.

Aucun de ces réglages n’ajoute de comportement d’activation. Un bouton personnalisé pouvant recevoir le focus a toujours besoin d’un écouteur pour fonctionner au clavier. Un rôle, un arrêt de tabulation et une fonction de rappel résolvent des parties différentes de l’interaction.

Donner un nom à chaque composant

Un lecteur d’écran utilise un nom accessible pour distinguer les composants. Un bouton textuel peut utiliser son texte visible. Un champ de texte ou une liste déroulante a besoin d’un libellé associé, comme <label for="email">Email</label> associé à id="email". aria-labelledby peut faire référence à un texte visible ailleurs ; aria-label peut fournir un nom lorsqu’il n’existe pas de texte visible adapté.

Un bouton de fermeture composé uniquement d’une icône peut être <button type="button" aria-label="Close">×</button>. Le nom décrit l’action au lieu de laisser l’utilisateur deviner le sens du symbole.

Afficher et faire respecter l’état

Garde un indicateur de focus visible. Si tu remplaces le contour par défaut, fournis un remplacement clair avec :focus-visible, par exemple outline: 3px solid #1a73e8. Le supprimer sans remplacement cache la position de l’utilisateur du clavier.

Un bouton natif désactivé quitte la séquence de tabulation et ne peut pas être activé normalement. aria-disabled="true" ne fait que communiquer son indisponibilité. Les actions au clic et au clavier d’un composant personnalisé doivent vérifier cet état et quitter la fonction sans agir. Centraliser cette vérification dans la fonction d’activation maintient la cohérence des deux modes d’entrée.

Un composant personnalisé doit donner le même résultat quelle que soit sa méthode d’activation. Garde l’action dans une seule fonction, dirige vers elle les utilisations au clavier et au pointeur, et mets à jour l’état lu à la fois par les styles et par la technologie d’assistance.

Permettre l’activation au clavier d’un bouton personnalisé

fakeButton.addEventListener("click", activate);
fakeButton.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    activate();
  }
});

Ce code concerne un bouton personnalisé pouvant recevoir le focus. Annuler l’action d’Espace empêche le défilement de la page pendant son exécution. Un bouton natif produit déjà des clics lors de son activation au clavier : lui ajouter une seconde voie au clavier peut donc exécuter l’action deux fois.

Choisir l’état adapté au composant

Un bouton à bascule « Couper le son » garde ce libellé et modifie aria-pressed. Si le libellé de l’action devient « Activer le son », omets aria-pressed. Une case à cocher utilise role="checkbox" et Espace pour changer d’état ; un interrupteur utilise role="switch" pour les états activé et désactivé.

Les attributs contiennent des chaînes. Compare getAttribute("aria-expanded") avec "true", et non avec le booléen true :

detailsButton.addEventListener("click", () => {
  const open = detailsButton.getAttribute(
    "aria-expanded") === "true";
  detailsButton.setAttribute("aria-expanded", String(!open));
  panel.hidden = open;
});

Lorsque open était vrai, le nouvel état est faux et le panneau devient masqué. aria-controls peut identifier le panneau par son identifiant. Les éléments natifs <details> et <summary> fournissent le comportement de divulgation sans ce script.

Utilise l’attribut d’état comme source pour les styles, par exemple [aria-pressed="true"], afin que les états visible et annoncé changent ensemble. Ferme les éléments contextuels avec Échap et rends le focus à leur élément déclencheur.

Donner un seul arrêt de tabulation à un groupe

Les onglets, les barres d’outils et les groupes de boutons radio utilisent Tabulation pour entrer dans le groupe ou en sortir et les touches fléchées pour s’y déplacer. Le tabindex itinérant maintient l’élément courant à 0 et les autres à -1. Lors d’un déplacement, définis l’ancien élément à -1, le nouveau à 0 et donne le focus au nouvel élément.

Pour trois éléments, un déplacement vers la droite depuis l’indice 2 revient à 0 avec (2 + 1) % 3. Vers la gauche depuis 0, (0 - 1 + 3) % 3 permet d’atteindre 2. Ajoute la longueur avant l’opération de reste, car en JavaScript -1 % 3 vaut −1.

Vérifie au clavier : atteins le composant, vois le focus, active-le avec les touches appropriées, déplace-toi dans un groupe et ferme un élément contextuel avec Échap. Vérifie l’état visible et l’état ARIA à chaque changement.

Le focus détermine où va la prochaine action au clavier. Si le composant qui a le focus disparaît, l’utilisateur peut perdre sa place. Traite le focus comme une partie de la mise à jour de la page, en particulier lors de l’ouverture d’une boîte de dialogue, de la suppression d’un élément ou du signalement d’une erreur.

Ouvrir une boîte de dialogue et revenir à son élément déclencheur

Mémorise l’élément qui a le focus avant l’ouverture. Déplace le focus dans la nouvelle interaction, puis rétablis-le à la fermeture :

let opener;
openButton.addEventListener("click", () => {
  opener = document.activeElement;
  dialog.showModal();
});
dialog.addEventListener("close", () => {
  if (opener && opener.isConnected) opener.focus();
});

showModal() sur une boîte de dialogue native déplace le focus à l’intérieur et rend le reste de la page inerte : il est donc impossible de cliquer dessus ou de lui donner le focus tant que la boîte modale est ouverte. Échap provoque normalement un événement cancel, suivi de la fermeture et d’un événement close. Un écouteur cancel peut empêcher la fermeture si l’application nécessite ce comportement.

Choisis une destination initiale utile pour le focus dans la boîte de dialogue, comme son premier composant pertinent. Pour un élément contextuel personnalisé, le code doit déplacer volontairement le focus. Lorsque l’élément déclencheur d’origine n’existe plus, choisis plutôt un composant utile à proximité au lieu d’essayer de donner le focus à un élément détaché.

Rendre une destination utile accessible au focus

Un titre ou un récapitulatif des erreurs ne peut normalement pas recevoir le focus. Donne-lui tabindex="-1" avant d’appeler .focus(). Il peut alors recevoir le focus volontairement sans devenir un arrêt supplémentaire pendant la navigation normale par Tabulation. N’utilise 0 que s’il appartient à cette séquence normale.

Préserver la position après une suppression

Avant de supprimer un élément de liste dont le bouton de suppression a le focus, trouve la prochaine destination utile. Donne le focus au bouton de l’élément suivant ; s’il n’y a pas d’élément suivant, utilise le bouton de l’élément précédent. Si la liste devient vide, donne le focus à son titre avec tabindex="-1".

Trouver la destination avant la suppression évite de perdre le lien avec les éléments voisins. N’envoie pas le focus en haut du document après chaque suppression ; la personne doit pouvoir continuer à travailler près de l’endroit modifié.

Garder le focus dans une interaction en cours

Un élément contextuel peut se fermer lorsque le focus quitte toute sa zone. L’événement focusout, qui remonte par bouillonnement, fournit la destination :

menu.addEventListener("focusout", (event) => {
  if (!menu.contains(event.relatedTarget)) {
    menu.hidden = true;
  }
});

Passer d’un composant du menu à un autre ne le ferme pas, car la destination reste à l’intérieur. Une destination null est aussi à l’extérieur ; contains(null) est faux. Ne rends pas automatiquement le focus à l’élément déclencheur lorsque l’utilisateur l’a volontairement déplacé vers un autre composant de la page.

Rendre les changements prévisibles

Après l’échec d’une validation personnalisée de formulaire, donne le focus au premier champ invalide ou à un récapitulatif des erreurs contenant des liens vers celles-ci. La validation intégrée donne déjà le focus à un champ invalide. Garde le texte d’erreur disponible pour que la personne sache quoi corriger.

Ne passe pas à un nouveau champ pendant que l’utilisateur saisit du texte et ne lance pas une navigation dès qu’une liste déroulante change. Laisse une action claire confirmer le changement. Le déplacement du focus doit accompagner une action volontaire ou une correction, sans interrompre la saisie ordinaire.