Attributs d’événements globaux
Un événement se produit lorsque le navigateur réagit à une action particulière de l’utilisateur. L’utilisateur génère un événement en cliquant sur un bouton de la souris, en lisant une vidéo, en téléversant un document ou une image, ou en effectuant d’autres actions sur un site web.
Pour réagir à un événement, un gestionnaire lui est attribué. Un gestionnaire est un moyen d’exécuter un script (par exemple, JavaScript) en cas d’actions de l’utilisateur. Il existe de nombreuses façons d’attacher un gestionnaire, et l’une d’elles consiste à le définir en HTML à l’aide d’attributs.
Ci-dessous, vous trouverez un tableau des attributs d’événement utilisés pour déclencher des actions spécifiques.
html
<button onclick="alert('Clicked!')">Click me</button>Attributs des événements de fenêtre
Les événements de fenêtre sont déclenchés pour l’objet window. Ce sont des attributs globaux qui peuvent être utilisés sur n’importe quel élément, bien qu’ils soient le plus souvent appliqués à la balise <body>.
| Attribute | Description |
|---|---|
| onafterprint | Exécuté lorsque le document est imprimé. Nouvel attribut en HTML5. |
| onbeforeprint | Exécuté avant que le document ne soit imprimé. Nouvel attribut en HTML5. |
| onbeforeunload | Exécuté lorsque le document est sur le point d’être déchargé (lorsqu’un utilisateur est sur le point de quitter la page avant qu’elle ne soit chargée). Nouvel attribut en HTML5. |
| onblur | Exécuté lorsqu’une fenêtre perd le focus. |
| onerror | Exécuté lorsqu’une erreur se produit lors du téléchargement du document. Nouvel attribut en HTML5. |
| onhashchange | Exécuté lorsque l’ancre dans l’URL d’une page web est modifiée (l’ancre vient après #). Nouvel attribut en HTML5. |
| onload | Exécuté lorsque le contenu d’une page web (images, styles CSS et scripts) est entièrement chargé. |
| onmessage | Exécuté lorsqu’un message est déclenché. Nouvel attribut en HTML5. |
| onoffline | Exécuté lorsque le navigateur fonctionne hors ligne. Nouvel attribut en HTML5. |
| ononline | Exécuté lorsque le navigateur fonctionne en ligne. Nouvel attribut en HTML5. |
| onpagehide | Exécuté lorsqu’un utilisateur quitte la page web. Nouvel attribut en HTML5. |
| onpageshow | Exécuté lorsqu’un utilisateur navigue vers une page web. Nouvel attribut en HTML5. |
| onpopstate | Exécuté lorsque l’historique de la fenêtre est modifié. Nouvel attribut en HTML5. |
| onredo | Exécuté lorsqu’une option « Rétablir » est utilisée (la dernière action est annulée). Nouvel attribut en HTML5. |
| onresize | Exécuté lorsqu’une fenêtre est redimensionnée. Nouvel attribut en HTML5. |
| onstorage | Exécuté lorsqu’un stockage web est mis à jour. Nouvel attribut en HTML5. |
| onundo | Exécuté lorsque la dernière action est annulée (commande « Annuler »). Nouvel attribut en HTML5. |
| onunload | Exécuté lorsqu’une page web est déchargée (fermée). Nouvel attribut en HTML5. |
Attributs des événements de formulaire
Un événement pouvant se produire dans un formulaire est appelé un é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 dans un formulaire.
Les attributs des événements de formulaire peuvent être appliqués à tous les éléments HTML, mais ils sont généralement utilisés avec les éléments de formulaire HTML.
| Attribute | Description |
|---|---|
| onblur | Exécuté lorsqu’un élément de formulaire perd le focus. |
| onchange | Exécuté lorsque la valeur de l’élément est modifiée. |
| oncontextmenu | Exécuté lorsque le menu contextuel est affiché. Nouvel attribut en HTML5. |
| onfocus | Exécuté lorsqu’un élément reçoit le focus. |
| oninput | Exécuté lorsqu’un élément reçoit une saisie de l’utilisateur. Nouvel attribut en HTML5. |
| oninvalid | Exécuté si un élément de saisie est invalide. Nouvel attribut en HTML5. |
| onreset | Exécuté lorsqu’un formulaire est réinitialisé (tous les contrôles du formulaire sont ramenés à leurs valeurs initiales). Nouvel attribut en HTML5. |
| onsearch | Exécuté lorsque l’utilisateur écrit quelque chose dans un champ de recherche (pour <input type="search">). |
| onselect | Exécuté lorsque du texte est sélectionné dans un élément. |
| onsubmit | Exécuté lorsqu’un formulaire est envoyé. |
Attributs des événements clavier
Les attributs des événements clavier peuvent être appliqués à tous les éléments HTML.
| Attribute | Description |
|---|---|
| onkeydown | Exécuté lorsque l’utilisateur appuie sur une touche du clavier. |
| onkeypress | Exécuté lorsqu’une touche est enfoncée. (Déprécié/obsolète. Ne fonctionne pas avec Alt, Ctrl, Shift, Esc, PrScr, etc.) |
| onkeyup | Exécuté lorsqu’une touche enfoncée est relâchée. |
Attributs des événements de souris
Les événements de souris se produisent lorsque la souris interagit avec le document HTML. Les attributs peuvent être appliqués à tous les éléments HTML.
| Attribute | Description |
|---|---|
| onclick | Exécuté lorsqu’un bouton de la souris est cliqué. |
| ondblclick | Exécuté lorsqu’un bouton de la souris est cliqué deux fois. |
| ondrag | Exécuté lorsqu’un élément est en cours de glissement. Nouvel attribut en HTML5. |
| ondragend | Exécuté lorsqu’un élément a été déplacé par glisser-déposer. Nouvel attribut en HTML5. |
| ondragenter | Exécuté lorsqu’un élément déplacé entre dans une cible de dépôt valide. Nouvel attribut en HTML5. |
| ondragleave | Exécuté lorsqu’un élément déplacé quitte une cible de dépôt valide. Nouvel attribut en HTML5. |
| ondragover | Exécuté lorsqu’un élément déplacé est déplacé au-dessus d’une cible de dépôt valide (toutes les quelques centaines de millisecondes). Nouvel attribut en HTML5. |
| ondragstart | Exécuté lorsque l’utilisateur commence à faire glisser un élément. Nouvel attribut en HTML5. |
| ondrop | Exécuté lorsque l’utilisateur dépose un élément déplacé. Nouvel attribut en HTML5. |
| onmousedown | Exécuté lorsqu’un bouton de la souris est enfoncé. |
| onmousemove | Exécuté lorsque le pointeur de la souris se déplace sur l’élément. |
| onmouseout | Exécuté lorsque le pointeur de la souris sort d’un élément. |
| onmouseover | Exécuté lorsque le pointeur de la souris se déplace sur un élément. |
| onmouseup | Exécuté lorsqu’un bouton de la souris est relâché. |
| onmousewheel | Exécuté lorsque la molette de la souris tourne vers le haut ou vers le bas au-dessus d’un élément. Attribut obsolète (utilisez plutôt l’attribut onwheel). |
| onscroll | Exécuté lorsqu’une barre de défilement d’un élément est en cours de défilement. Nouvel attribut en HTML5. |
| onwheel | Exécuté lorsque la molette de la souris tourne vers le haut ou vers le bas au-dessus d’un élément. Nouvel attribut en HTML5. |
Attributs des événements du presse-papiers
| Attribute | Description |
|---|---|
| oncopy | Exécuté lorsque le contenu d’un élément est copié. |
| oncut | Exécuté lorsque le contenu d’un élément est coupé. |
| onpaste | Exécuté lorsque le contenu d’un élément est collé. |
Attributs des événements multimédias
Les événements multimédias se produisent dans des éléments multimédias, tels que la vidéo, l’image et l’audio. Les attributs peuvent être appliqués à n’importe quel élément HTML, mais ils sont généralement utilisés dans les éléments audio, embed, img, object et video.
| Attribute | Description |
|---|---|
| onabort | Exécuté lorsque le chargement d’un audio/vidéo est interrompu. Nouvel attribut en HTML5. |
| oncanplay | Exécuté lorsque le fichier est prêt à commencer la lecture (a suffisamment été mis en mémoire tampon pour démarrer la lecture). Nouvel attribut en HTML5. |
| oncanplaythrough | Exécuté lorsque le fichier est prêt à être lu du début à la fin sans s’arrêter pour la mise en mémoire tampon. Nouvel attribut en HTML5. |
| oncuechange | Exécuté lorsque la durée du média est modifiée. Nouvel attribut en HTML5. |
| onemptied | Exécuté lorsqu’un événement se produit et que le fichier est indisponible (par exemple, lorsque la connexion Internet est perdue). Nouvel attribut en HTML5. |
| onended | Exécuté lorsqu’un fichier multimédia a atteint la fin. Nouvel attribut en HTML5. |
| onerror | Exécuté lorsqu’une erreur se produit lors du chargement du fichier. Nouvel attribut en HTML5. |
| onloadeddata | Exécuté lorsque les données multimédias sont chargées. Nouvel attribut en HTML5. |
| onloadedmetadata | Exécuté lorsque les métadonnées (taille des fichiers multimédias, durée, etc.) sont chargées. Nouvel attribut en HTML5. |
| onloadstart | Exécuté lorsque le navigateur commence à télécharger des données multimédias. Nouvel attribut en HTML5. |
| onpause | Exécuté lorsque le fichier multimédia est mis en pause. Nouvel attribut en HTML5. |
| onplay | Exécuté lorsque le fichier est prêt à commencer la lecture. Nouvel attribut en HTML5. |
| onplaying | Exécuté lorsque le fichier commence à être lu. Nouvel attribut en HTML5. |
| onprogress | Exécuté lorsque le navigateur est en train de récupérer des données multimédias. Nouvel attribut en HTML5. |
| onratechange | Exécuté à chaque fois que le mode de lecture est modifié (par exemple, lorsque l’utilisateur passe en mode avance rapide ou ralenti). Nouvel attribut en HTML5. |
| onseeked | Exécuté lorsque la recherche est terminée. Nouvel attribut en HTML5. |
| onseeking | Exécuté lorsque l’attribut seeking des balises <audio> ou <video> est défini sur true, indiquant que la recherche est active. Nouvel attribut en HTML5. |
| onstalled | Exécuté lorsque le navigateur ne peut pas obtenir de données multimédias pour une raison quelconque. Nouvel attribut en HTML5. |
| onsuspend | Exécuté lorsque le navigateur a déjà commencé à extraire des données multimédias, mais que le processus a été suspendu avant que les données ne soient complètement chargées. Nouvel attribut en HTML5. |
| ontimeupdate | Exécuté lorsque la position de lecture est modifiée. Nouvel attribut en HTML5. |
| onvolumechange | Exécuté à chaque fois que le volume est modifié (y compris le réglage du volume sur « muet »). Nouvel attribut en HTML5. |
| onwaiting | Exécuté lorsque le fichier multimédia est suspendu, mais est sur le point de reprendre (par exemple, lorsque le fichier est mis en pause pour la mise en mémoire tampon). Nouvel attribut en HTML5. |
Autres événements
| Attribute | Description |
|---|---|
| onerror | Exécuté lorsqu’une erreur se produit lors du téléchargement d’un fichier externe. |
| onshow | Exécuté lorsque le <menu> est affiché comme menu contextuel. Nouvel attribut en HTML5. |
| ontoggle | Exécuté lorsqu’un utilisateur ouvre ou ferme le <details>. Nouvel attribut en HTML5. |
Practice
What are global event attributes in HTML?