Attributs d’événements

Ce qu’on appelle un événement est la réaction du navigateur à certaines actions de l'utilisateur et à l'interaction interne des scripts. L'utilisateur génère des événements lorsqu'il clique sur un bouton de la souris ou un clavier, charge un document, déplace le focus d'un élément à un autre, etc.

Chaque événement se voit attribuer un gestionnaire écrit dans un langage de script (tel que JavaScript), une fonction qui se déclenche dès qu'un événement s'est produit. Pour ce faire, vous pouvez affecter le gestionnaire directement au balisage à l'aide des attributs d'événement.

Vous trouverez ci-dessous un tableau des attributs d'événement pouvant être ajoutés aux éléments HTML pour déclencher certaines actions.

Attributs d’événements de la fenêtre

Des événements de l’objet de la fenêtre est utilisé avec la balise (tag) <body>.

Attribut Description
onafterprint Il commence après l’impression de la page.
Nouvel attribut en HTML5.
onbeforeprint Il commence
Nouvel attribut en HTML5.
onbeforeunload Il commence avant le chargement du document (lorsqu’on essaie de quitter la page avant de le télécharger).
Nouvel attribut en HTML5.
onblur Il commence, lorsque la fenêtre perd le focus.
onerror Il commence en cas d'erreur lors du chargement du document.
Nouvel attribut en HTML5.
onhashchange Il commence lorsque on modifie l'ancre dans l'adresse du document (indiqué par #)
Nouvel attribut en HTML5.
onload Il commence, lorsque tout le contenu de la page (images, tableaux externes des styles et scripts externes) est complètement chargé.
onmessage Il commence, lorsque on reçoit un message.
Nouvel attribut en HTML5.
onoffline Il commence, lorsque le navigateur est en mode offline.
Nouvel attribut en HTML5.
ononline Il commence, lorsque le navigateur est en mode en ligne.
Nouvel attribut en HTML5.
onpagehide Il commence, lorsque l’utilisateur quitte la page.
Nouvel attribut en HTML5.
onpageshow Il commence, lorsque l'utilisateur navigue vers la page.
Nouvel attribut en HTML5.
onpopstate Il commence, lorsque la fenêtre d’histoires est changée.
Nouvel attribut en HTML5.
onredo Il commence, lorsque le document effectue la restauration de la dernière opération.
Nouvel attribut en HTML5.
onresize Il commence, lorsque la taille de la fenêtre est changée.
Nouvel attribut en HTML5.
onstorage Il commence, lorsqu’on met à jour le magasin de données Web.
Nouvel attribut en HTML5.
onundo Il commence, lorsque la commande ʺ annuler ʺ est exécutée dans le document.
Nouvel attribut en HTML5.
onunload Il commence, lorsque l’utilisateur sort du document.
Nouvel attribut en HTML5.

Attributs d’événement de la forme

Les événements de la forme sont ceux, qui se produisent lors de l'exécution d'actions avec des formulaires HTML.

Les attributs d’événements de la forme peuvent être appliqués à tous les éléments HTML, mais ils sont généralement utilisés dans des éléments de formulaire.

Attribut Description
onblur Il commence, lorsque l’élément perd le focus.
onchange Il commence, lorsque la valeur de l’élément est changée.
oncontextmenu Il commence, lorsque le menu contextuel de l'élément est appelé.
Nouvel attribut en HTML5.
onfocus Il commence, lorsque l’élément reçoit un focus.
oninput Il commence, lorsque l’utilisateur saisie les données dans l’élément.
Nouvel attribut en HTML5.
oninvalid Il commence, si la valeur saisie de l’élément n’est pas correct, c’est-à-dire, il ne correspond pas aux demandes (par exemple, le champ obligatoire n’est pas rempli – l’attribut required).
Nouvel attribut en HTML5.
onreset Il commence, lorsqu’on clique sur le bouton de Reset (réinitialisation des valeurs) dans la forme.
Nouvel attribut en HTML5.
onsearch Il commence, lorsqu’on clique sur le clavier "Enter" ou le bouton "х" dans l’élément <input> (type="search").
onselect Il commence lorsque le texte de l'élément est sélectionné.
onsubmit Il commence, lorsque la forme est envoyée.

Attributs d’événements du clavier

Les événements initiés par le clavier peuvent être appliqués à tous les éléments HTML.

Attribut Description
onkeydown Il commence, lorsque l’utilisateur clique sur n’importe quel clavier.
onkeypress Il commence après l’utilisateur clique sur le clavier (ne fonctionne avec tels clavier qu’Alt, Ctrl, Shift, Esc, PrScr et etc.)
onkeyup Il commence après que la touche sur laquelle on a appuyé est relâchée.

Attributs d’événements de la souris

Les attributs d’événements, qui se produisent lors de l’exécutions d’actions avec la souris, ils peuvent être appliqués à tous les éléments de HTML5.

Attribut Description
onclick Il commence lorsqu’on clique avec la souris.
ondblclick Il commence lorsqu’on clique avec la souris deux fois.
ondrag Il commence en faisant glisser l’élément.
Nouvel attribut en HTML5.
ondragend Il commence à la fin de l’opération de glisser-déposer.
Nouvel attribut en HTML5.
ondragenter Il commence, quand l’élément déposé a apparu dans la zone donnée.
Nouvel attribut en HTML5.
ondragleave Il commence, quand l’élément déposé sort de la zone disponible pour le transfert.
Nouvel attribut en HTML5.
ondragover Il commence lorsque l'élément est déplacé sur une zone de transfert autorisée.
Nouvel attribut en HTML5.
ondragstart Il commence au début de l’opération de glisser-déposer.
Nouvel attribut en HTML5.
ondrop Il commence après l'utilisateur a libéré l'élément déplacé.
Nouvel attribut en HTML5.
onmousedown Il commence en cliquant sur le bouton de la souris.
onmousemove Il commence lorsque le pointeur de la souris se déplace.
onmouseout Il commence, lorsque le pointeur de la souris sort des cadres de l’élément.
onmouseover Il commence, lorsque le pointeur de la souris se déplace sur l’élément.
onmouseup Il commence lorsque le bouton de la souris est relâché.
onmousewheel Fonctionne lorsque la molette de la souris défile.
Un attribut obsolète (il est recommandé d'utiliser l'attribut onwheel).
onscroll Il commence pendant que la barre de défilement de l'élément défile.
Nouvel attribut en HTML5.
onwheel Il commence en utilisant la molette de la souris sur un élément.
Nouvel attribut en HTML5.

Événements presse-papiers

Attribut Description
oncopy Il commence, lorsque l'utilisateur copie le contenu de l'élément.
oncut Il commence, lorsque l’utilisateur coupe le contenu de l’élément.
onpaste Il commence, lorsque l’utilisateur met le contenu dans l’élément.

Événements de fichier multimédia

Les événements qui se produisent dans les éléments multimédias (vidéo, image, audio) peuvent être appliqués à tous les éléments HTML, mais le plus souvent, ils sont utilisés dans des éléments multimédias tels que audio, embed, img, object et video.

Attribut Description
onabort Il commence, lorsque la lecture est annulée.
Nouvel attribut en HTML5.
oncanplay Il commence, lorsque le fichier est prêt à être lu (suffisamment chargé dans le tampon).
Nouvel attribut en HTML5.
oncanplaythrough Il commence, lorsque le fichier peut être lu du début à la fin sans s'arrêter pour la mise en mémoire tampon.
Nouvel attribut en HTML5.
oncuechange Il commence, lorsque la durée du média change.
Nouvel attribut en HTML5.
onemptied Il commence, lorsqu'un problème survient et que le fichier devient indisponible (par exemple, lorsqu'il n'y a pas de connexion Internet).
Nouvel attribut en HTML5.
onended Il commence, lorsque le fichier multimédia est lu jusqu'à la fin.
Nouvel attribut en HTML5.
onerror Il commence, lorsqu'une erreur survient lors du chargement de l'élément.
Nouvel attribut en HTML5.
onloadeddata Il commence, lorsqu’on télécharge des données de média.
Nouvel attribut en HTML5.
onloadedmetadata Il commence lorsque les métadonnées sont chargées (par exemple, la taille du fichier multimédia, la durée, etc.).
Nouvel attribut en HTML5.
onloadstart Il commence, lorsque le navigateur commence à charger des données médias.
Nouvel attribut en HTML5.
onpause Il commence si le fichier est en pause (utilisateur suspendu) ou programmé.
Nouvel attribut en HTML5.
onplay Il commenece, lorsque le fichier est prêt à jouer.
Nouvel attribut en HTML5.
onplaying Il commence quand le fichier est lu.
Nouvel attribut en HTML5
onprogress Il commence quand le navigateur est en train de recevoir les données du fichier multimédia.
Nouvel attribut en HTML5.
onratechange Il commence chaque fois que le mode de lecture est changé (par exemple, l'utilisateur active le mode de lecture lente ou d'avance rapide).
Nouvel attribut en HTML5.
onseeked Il commence, lorsque l’attribut de recherche de l’éléments média (object.seeking) des tags audio ou video a la valeur "false" (recherche est fini, et la position actuelle de lecture est trouvée).
Nouvel attribut en HTML5.
onseeking Il commence, lorsque l’attribut de recherche de l’élément média (object.seeking) des tags <audio>html5 ou <video>html5 a la valeur "true" (recherche est commencé, la position actuelle de lecture est déplacée).
Nouvel attribut en HTML5.
onstalled Il commence, lorsque le navigateur ne peut pas recevoir les données du fichier multimédia pour une raison quelconque.
Nouvel attribut en HTML5.
onsuspend Il commence, lorsque le navigateur a déjà commencé à récupérer les données du média, mais le processus a été suspendu avant l'extraction complète du fichier multimédia.
Nouvel attribut en HTML5.
ontimeupdate Il commence, lorsque la média change la position de lecture.
Nouvel attribut en HTML5.
onvolumechange Il commence, lorsque le niveau du volume de média est changé, y compris le mode "mute" (en silencieux).
Nouvel attribut en HTML5.
onwaiting Il commence, lorsque le fichier multimédia est arrêté, mais que le redémarrage est attendu (par exemple, lorsque le fichier marque une pause pour mettre en mémoire tampon les données restantes).
Nouvel attribut en HTML5.

Autres événements

Attribut Description
onerror Il commence en cas d’erreur lors du chargement du fichier externe.
onshow Il commence, lorsque l’élément <menu> est affiché comme un menu contextuel.
Nouvel attribut en HTML5.
ontoggle Il commence, lorsque l’utilisateur ouvre ou ferme l’élément <details>.
Nouvel attribut en HTML5.

Pratiquez vos connaissances

Quels sont les attributs d'événements HTML que vous pouvez utiliser dans votre code?
Trouvez-vous cela utile?