Attributs d'événements globaux HTML

Un événement se produit lorsque le navigateur réagit à une action particulière — un clic de souris, l'appui sur une touche, la lecture d'une vidéo, la soumission d'un formulaire, le redimensionnement de la fenêtre, etc. Pour répondre à un événement, vous attachez un gestionnaire : un morceau de script (généralement JavaScript) qui s'exécute lorsque l'événement se déclenche.

HTML vous permet d'attacher un gestionnaire directement dans le balisage via un attribut d'événement. Chaque attribut de cette page commence par on suivi du nom de l'événement (onclick, onkeydown, onsubmit, …). Tous ont été ajoutés en HTML5 et acceptent du code JavaScript comme valeur :

<button onclick="alert('Clicked!')">Click me</button>

Ces attributs d'événements sont globaux — la plupart peuvent être placés sur n'importe quel élément — mais chacun n'a de sens que dans le bon contexte (attributs de formulaire sur les contrôles de formulaire, attributs média sur <audio>/<video>, etc.).

Avertissement

Les attributs on* en ligne sont déconseillés dans le code moderne. Ils mélangent le comportement avec le balisage, ne permettent pas d'attacher facilement plusieurs gestionnaires, et sont bloqués par une politique de sécurité du contenu stricte. Préférez addEventListener dans un script séparé, ce qui sépare HTML et JavaScript et permet à plusieurs gestionnaires d'écouter le même événement :

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", () => {
    alert("Clicked!");
  });
</script>

Les tableaux ci-dessous répertorient les attributs d'événements par catégorie. Pour un traitement plus complet du fonctionnement des événements dans le navigateur, consultez JavaScript Events et les attributs globaux HTML associés.

Attributs d'événements de fenêtre

Les événements de fenêtre sont déclenchés pour l'objet window. Ils sont généralement placés sur la balise <body>, où le navigateur les associe à window.

Attribut	Description
onafterprint	Se déclenche après l'impression du document.
onbeforeprint	Se déclenche avant l'impression du document.
onbeforeunload	Se déclenche avant le déchargement du document (par ex. l'utilisateur est sur le point de quitter la page).
onblur	Se déclenche quand la fenêtre perd le focus (l'utilisateur bascule vers un autre onglet ou une autre application).
onerror	Se déclenche quand une erreur se produit lors du chargement du document ou d'une ressource.
onhashchange	Se déclenche quand le fragment (la partie de l'URL après `#`) change.
onload	Se déclenche quand toute la page — images, CSS et scripts — a fini de se charger.
onmessage	Se déclenche quand la fenêtre reçoit un message (par ex. via `postMessage`).
onoffline	Se déclenche quand le navigateur perd sa connexion réseau.
ononline	Se déclenche quand le navigateur retrouve sa connexion réseau.
onpagehide	Se déclenche quand l'utilisateur quitte la page.
onpageshow	Se déclenche quand l'utilisateur accède à la page.
onpopstate	Se déclenche quand l'entrée active de l'historique change.
onresize	Se déclenche quand la fenêtre est redimensionnée.
onstorage	Se déclenche quand une zone de stockage web (`localStorage`/`sessionStorage`) est mise à jour.
onunload	Se déclenche quand la page est déchargée (le document est en cours de suppression).

<body onload="document.body.style.background = '#eef'">
  <p>This page changes its background colour once it has loaded.</p>
</body>

Attributs d'événements de formulaire

Un événement pouvant se produire dans un formulaire est appelé événement de formulaire. Les événements de formulaire se produisent lorsqu'un utilisateur ouvre ou ferme un formulaire, passe d'un formulaire à un autre, ou travaille avec des données d'un formulaire.

Les attributs d'événements de formulaire peuvent être appliqués à tous les éléments HTML, mais ils sont généralement utilisés avec les contrôles de formulaire tels que <input>, <select> et <textarea>.

Attribut	Description
onblur	Se déclenche quand un élément perd le focus (l'utilisateur utilise Tab ou clique en dehors d'un contrôle).
onchange	Se déclenche quand la valeur d'un contrôle a changé et que le contrôle perd le focus.
oncontextmenu	Se déclenche quand le menu contextuel (clic droit) est ouvert sur l'élément.
onfocus	Se déclenche quand un élément obtient le focus.
oninput	Se déclenche immédiatement à chaque changement de la valeur d'un contrôle.
oninvalid	Se déclenche quand un contrôle soumis échoue à la validation des contraintes.
onreset	Se déclenche quand un formulaire est réinitialisé à ses valeurs initiales.
onsearch	Se déclenche quand l'utilisateur effectue une recherche dans un champ `<input type="search">`.
onselect	Se déclenche quand l'utilisateur sélectionne du texte dans un `<input>` ou un `<textarea>`.
onsubmit	Se déclenche quand un formulaire est soumis.

<form onsubmit="alert('Submitting…'); return false;">
  <input type="text" name="name"
         onfocus="this.style.background = '#ffd'"
         onblur="this.style.background = ''"
         placeholder="Your name">
  <button type="submit">Send</button>
</form>

Retourner false depuis onsubmit (ou appeler event.preventDefault() en JavaScript) empêche l'envoi effectif du formulaire — pratique lors des tests.

Attributs d'événements clavier

Les attributs d'événements clavier peuvent être appliqués à tous les éléments HTML.

Attribut	Description
onkeydown	Se déclenche quand une touche est enfoncée. Se répète tant que la touche est maintenue.
onkeypress	Se déclenche quand une touche de caractère est pressée. Déprécié — utilisez plutôt `onkeydown`.
onkeyup	Se déclenche quand une touche pressée est relâchée.

<input type="text"
       onkeyup="document.getElementById('echo').textContent = this.value"
       placeholder="Type here">
<p>You typed: <span id="echo"></span></p>

Attributs d'événements souris

Les événements souris se produisent lorsque la souris interagit avec le document HTML. Les attributs peuvent être appliqués à tous les éléments HTML.

Attribut	Description
onclick	Se déclenche quand l'élément est cliqué.
ondblclick	Se déclenche quand l'élément est double-cliqué.
ondrag	Se déclenche de façon répétée pendant qu'un élément est glissé.
ondragend	Se déclenche quand une opération de glisser se termine.
ondragenter	Se déclenche quand un élément glissé entre dans une cible de dépôt valide.
ondragleave	Se déclenche quand un élément glissé quitte une cible de dépôt valide.
ondragover	Se déclenche de façon répétée pendant qu'un élément glissé est au-dessus d'une cible de dépôt valide.
ondragstart	Se déclenche quand l'utilisateur commence à faire glisser un élément.
ondrop	Se déclenche quand un élément glissé est déposé sur une cible de dépôt valide.
onmousedown	Se déclenche quand un bouton de la souris est enfoncé sur l'élément.
onmousemove	Se déclenche chaque fois que le pointeur se déplace au-dessus de l'élément.
onmouseout	Se déclenche quand le pointeur quitte l'élément.
onmouseover	Se déclenche quand le pointeur passe sur l'élément.
onmouseup	Se déclenche quand un bouton de la souris est relâché sur l'élément.
onmousewheel	Obsolète — utilisez plutôt `onwheel`.
onscroll	Se déclenche quand la barre de défilement d'un élément est actionnée.
onwheel	Se déclenche quand la molette de la souris tourne vers le haut ou vers le bas sur l'élément.

<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
     style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
  Move the mouse here
</div>

Attributs d'événements presse-papiers

Attribut	Description
oncopy	Se déclenche quand le contenu d'un élément est copié.
oncut	Se déclenche quand le contenu d'un élément est coupé.
onpaste	Se déclenche quand du contenu est collé dans un élément.

Attributs d'événements média

Les événements média se produisent dans les éléments multimédias, tels que les vidéos, les images et les fichiers audio. Les attributs peuvent être appliqués à n'importe quel élément HTML, mais ils sont généralement utilisés au sein des éléments audio, embed, img, object et video.

Attribut	Description
onabort	Se déclenche quand le chargement du média est interrompu.
oncanplay	Se déclenche quand le navigateur a mis en mémoire tampon suffisamment pour commencer la lecture.
oncanplaythrough	Se déclenche quand le navigateur estime pouvoir lire jusqu'à la fin sans s'arrêter pour mettre en mémoire tampon.
oncuechange	Se déclenche quand la piste active d'une piste de texte (par ex. sous-titres ou légendes) change.
ondurationchange	Se déclenche quand la durée du média change.
onemptied	Se déclenche quand le média devient vide (par ex. la connexion est perdue).
onended	Se déclenche quand la lecture atteint la fin du média.
onerror	Se déclenche quand une erreur se produit lors du chargement du média.
onloadeddata	Se déclenche quand l'image courante des données média a été chargée.
onloadedmetadata	Se déclenche quand les métadonnées (durée, dimensions, …) ont été chargées.
onloadstart	Se déclenche quand le navigateur commence à charger le média.
onpause	Se déclenche quand la lecture est mise en pause.
onplay	Se déclenche quand la lecture commence ou reprend.
onplaying	Se déclenche quand la lecture est effectivement en cours (après la mise en mémoire tampon, par exemple).
onprogress	Se déclenche périodiquement pendant que le navigateur charge le média.
onratechange	Se déclenche quand la vitesse de lecture change (par ex. avance rapide).
onseeked	Se déclenche quand une opération de déplacement se termine.
onseeking	Se déclenche quand une opération de déplacement commence.
onstalled	Se déclenche quand le navigateur tente, sans succès, de récupérer des données média.
onsuspend	Se déclenche quand le chargement du média est intentionnellement mis en pause.
ontimeupdate	Se déclenche quand la position de lecture change pendant la lecture.
onvolumechange	Se déclenche quand le volume change (y compris la mise en sourdine).
onwaiting	Se déclenche quand la lecture s'arrête parce que l'image suivante n'est pas encore mise en mémoire tampon.

Autres événements

Attribut	Description
ontoggle	Se déclenche quand l'utilisateur ouvre ou ferme un élément `<details>`.

Info

Certains attributs que vous pouvez rencontrer dans d'anciennes références — onredo, onundo et onshow — n'ont jamais fait partie du HTML standard ou ne sont pas pris en charge par les navigateurs, ils ont donc été omis ici.

Pratique

Que sont les attributs d'événements globaux en HTML ?

Des attributs on*, disponibles sur la plupart des éléments HTML, qui exécutent JavaScript lorsqu'un événement correspondant se déclenche.Des attributs qui envoient des données au serveur lorsqu'un événement se produit.Des gestionnaires d'événements qui ne fonctionnent que sur les éléments de formulaire.Un remplacement d'addEventListener que les navigateurs ne prennent plus en charge.