Événements HTML DOM
événements DOM HTML JavaScript permettent d'enregistrer des gestionnaires d'événements différents sur des éléments dans un document HTML.
Les événements sont normalement utilisés en combinaison avec les fonctions et la fonction ne seront pas exécutées avant que l'événement se produit (such as when a user clicks a button) par (such as when a user clicks a button) sur (such as when a user clicks a button) .
Tip: Le modèle d'événement a été normalisé par le W3C dans DOM niveau 2.
Événements HTML DOM
DOM: Indique dans lequel DOM niveau de la propriété a été introduite.
événements de la souris
| un événement | La description | DOM |
|---|---|---|
| sur clic | L'événement se produit lorsque l'utilisateur clique sur un élément | 2 |
| oncontextmenu | L'événement se produit lorsque l'utilisateur droit-clique sur un élément pour ouvrir un menu contextuel | 3 |
| ondblclick | Cet événement se produit lorsque l'utilisateur double-clique sur un élément | 2 |
| onmousedown | L'événement se produit lorsque l'utilisateur appuie sur un bouton de la souris sur un élément | 2 |
| OnMouseEnter | L'événement se produit lorsque le pointeur est déplacé sur un élément | 2 |
| OnMouseLeave | L'événement se produit lorsque le pointeur est déplacé à partir d'un élément | 2 |
| onmousemove | L'événement se produit lorsque le pointeur se déplace alors qu'il est sur un élément | 2 |
| onmouseover | L'événement se produit lorsque le pointeur est déplacé sur un élément, ou sur l'un de ses enfants | 2 |
| onmouseout | Cet événement se produit lorsqu'un utilisateur déplace le pointeur de la souris sur un élément, ou de l'un de ses enfants | 2 |
| onmouseup | Cet événement se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément | 2 |
Événements clavier
| un événement | La description | DOM |
|---|---|---|
| onkeydown | L'événement se produit lorsque l'utilisateur appuie sur une touche | 2 |
| onkeypress | L'événement se produit lorsque l'utilisateur appuie sur une touche | 2 |
| onkeyup | L'événement se produit lorsque l'utilisateur relâche une touche | 2 |
Cadre / Evénements d'objet
| un événement | La description | DOM |
|---|---|---|
| onabort | L'événement se produit lorsque le chargement d'une ressource a été avorté | 2 |
| onbeforeunload | L'événement se produit avant que le document est sur le point d'être déchargé | 2 |
| onerror | L'événement se produit lorsqu'une erreur se produit lors du chargement d'un fichier externe | 2 |
| onhashchange | L'événement se produit quand il y a eu des changements à la partie d'ancrage d'une URL | 3 |
| en charge | L'événement se produit quand un objet est chargé | 2 |
| onpageshow | L'événement se produit lorsque l'utilisateur accède à une page Web | 3 |
| onpagehide | L'événement se produit lorsque l'utilisateur quitte une page Web | 3 |
| onresize | L'événement se produit lorsque l'affichage du document est redimensionnée | 2 |
| onscroll | L'événement se produit lorsque est défilée la barre de défilement d'un élément | 2 |
| onunload | L'événement se produit une fois par page a déchargé (pour <body>) | 2 |
Événements Formulaire
| un événement | La description | DOM |
|---|---|---|
| le flou | L'événement se produit lorsqu'un élément perd le focus | 2 |
| sur le changement | L'événement se produit lorsque le contenu d'un élément de forme, la sélection ou l'état activé ont changé (for <input>, <keygen>, <select>, and <textarea>) | 2 |
| onfocus | L'événement se produit lorsqu'un élément obtient le focus | 2 |
| onfocusin | L'événement se produit lorsqu'un élément est sur le point d'obtenir le foyer | 2 |
| onfocusout | L'événement se produit lorsqu'un élément est sur le point de perdre le focus | 2 |
| oninput | L'événement se produit quand un élément reçoit une entrée utilisateur | 3 |
| oninvalid | L'événement se produit quand un élément est invalide | 3 |
| onreset | L'événement se produit quand une forme est remis à zéro | 2 |
| onsearch | L'événement se produit lorsque l'utilisateur écrit quelque chose dans un champ de recherche (pour <input = « search »>) | 3 |
| onselect | L'événement se produit après que l'utilisateur sélectionne un texte (for <input> and <textarea>) | 2 |
| onsubmit | L'événement se produit lorsqu'un formulaire est soumis | 2 |
Événements Faire glisser
| un événement | La description | DOM |
|---|---|---|
| ondrag | L'événement se produit lorsqu'un élément est en cours de déplacement | 3 |
| ondragend | L'événement se produit lorsque l'utilisateur a fini de glisser un élément | 3 |
| ondragenter | L'événement se produit lorsque l'élément entraîné pénètre dans la cible de dépôt | 3 |
| OnDragLeave | L'événement se produit lorsque l'élément traîné quitte la cible de baisse | 3 |
| ondragover | L'événement se produit lorsque l'élément entraîné est supérieure à la cible de dépôt | 3 |
| ondragstart | L'événement se produit lorsque l'utilisateur commence à faire glisser un élément | 3 |
| ondrop | L'événement se produit lorsque l'élément entraîné est déposé sur la cible de dépôt | 3 |
Événements Presse-papiers
| un événement | La description | DOM |
|---|---|---|
| oncopy | L'événement se produit lorsque l'utilisateur copie le contenu d'un élément | |
| oncut | L'événement se produit lorsque l'utilisateur coupe le contenu d'un élément | |
| onpaste | L'événement se produit lorsque l'utilisateur colle un contenu dans un élément |
Événements Imprimer
| un événement | La description | DOM |
|---|---|---|
| onafterprint | L'événement se produit lorsqu'une page a commencé à imprimer, ou si la boîte de dialogue d'impression a été fermé | 3 |
| onbeforeprint | L'événement se produit lorsqu'une page est sur le point d'être imprimé | 3 |
Événements médiatiques
| un événement | La description | DOM |
|---|---|---|
| onabort | Cet événement se produit lorsque le chargement d'un support est abandonnée | 3 |
| oncanplay | L'événement se produit lorsque le navigateur peut commencer à jouer les médias (quand il a suffisamment tamponnée pour commencer) | 3 |
| oncanplaythrough | L'événement se produit lorsque le navigateur peut jouer dans les médias sans arrêt en mémoire tampon | 3 |
| ondurationchange | L'événement se produit lorsque la durée des médias est modifiée | 3 |
| onemptied | L'événement se produit lorsque quelque chose se passe mal et le fichier multimédia est soudainement indisponible (like unexpectedly disconnects) se (like unexpectedly disconnects) de (like unexpectedly disconnects) | 3 |
| onended | L'événement se produit lorsque les médias ont atteint la fin (useful for messages like "thanks for listening") les (useful for messages like "thanks for listening") votre (useful for messages like "thanks for listening") | 3 |
| onerror | L'événement se produit quand une erreur est survenue pendant le chargement d'un fichier multimédia | 3 |
| onloadeddata | L'événement se produit lorsque les données de média est chargé | 3 |
| onloadedmetadata | L'événement se produit lorsque les données méta (like dimensions and duration) que les (like dimensions and duration) la (like dimensions and duration) sont chargés | 3 |
| onLoadStart | L'événement se produit lorsque le navigateur commence à chercher les médias spécifié | 3 |
| OnPause | L'événement se produit lorsque le support est mis en pause, soit par l'utilisateur ou par programme | 3 |
| onplay | L'événement se produit lorsque les médias ont démarré ou n'est plus pause | 3 |
| onplaying | L'événement se produit lorsque les médias joue après avoir été interrompu ou arrêté en mémoire tampon | 3 |
| onprogress | L'événement se produit lorsque le navigateur est dans le processus d'obtention des données de médias (downloading the media) | 3 |
| onratechange | L'événement se produit lorsque la vitesse de lecture des médias est modifié | 3 |
| onseeked | Cet événement se produit lorsque l'utilisateur a terminé le déplacement / sauter vers une nouvelle position dans les médias | 3 |
| onseeking | L'événement se produit lorsque l'utilisateur commence à se déplacer / sauter vers une nouvelle position dans les médias | 3 |
| onstalled | L'événement se produit lorsque le navigateur tente d'obtenir des données des médias, mais les données ne sont pas disponibles | 3 |
| onsuspend | L'événement se produit lorsque le navigateur est volontairement ne reçoit pas les données des médias | 3 |
| ontimeupdate | L'événement se produit lorsque la position de lecture a changé (comme lorsque l'utilisateur avance rapide à un point différent dans les médias) | 3 |
| onvolumechange | L'événement se produit lorsque le volume des médias a changé (comprend le réglage du volume à « mute ») | 3 |
| onwaiting | L'événement se produit lorsque le support est mis en pause, mais devrait reprendre (comme lorsque le support fait une pause au tampon plus de données) | 3 |
Événements animation
| un événement | La description | DOM |
|---|---|---|
| animationend | L'événement se produit lorsqu'une animation CSS a terminé | 3 |
| animationiteration | L'événement se produit lorsqu'une animation CSS est répété | 3 |
| animationstart | L'événement se produit lorsqu'une animation CSS a commencé | 3 |
Evénements de transition
| un événement | La description | DOM |
|---|---|---|
| transitionend | L'événement se produit lorsqu'une transition CSS a terminé | 3 |
Serveur-événements envoyés
| un événement | La description | DOM |
|---|---|---|
| onerror | L'événement se produit lorsqu'une erreur se produit avec la source d'événement | |
| onmessage | L'événement se produit lorsqu'un message est reçu par la source d'événement | |
| SurOuverture | L'événement se produit quand une connexion avec la source d'événements est ouvert |
Divers événements
| un événement | La description | DOM |
|---|---|---|
| onmessage | L'événement se produit lorsqu'un message est reçu par l' intermédiaire ou d'un objet (WebSocket, Web Worker, Event Source or a child frame or a parent window) de l' (WebSocket, Web Worker, Event Source or a child frame or a parent window) d' (WebSocket, Web Worker, Event Source or a child frame or a parent window) | 3 |
| OnMouseWheel | Obsolète. Utilisez le onwheel au lieu événement | |
| ononline | L'événement se produit lorsque le navigateur commence à travailler en ligne | 3 |
| onoffline | L'événement se produit lorsque le navigateur commence à travailler en mode déconnecté | 3 |
| onpopstate | L'événement se produit lorsque l'histoire de la fenêtre change | 3 |
| onshow | L'événement se produit lorsqu'un <menu> élément est affiché comme un menu contextuel | 3 |
| onstorage | L'événement se produit lorsqu'une zone de stockage Web est mis à jour | 3 |
| ontoggle | L'événement se produit lorsque l'utilisateur ouvre ou ferme le <details> élément | 3 |
| onwheel | L'événement se produit lorsque la roue de la souris roule vers le haut ou vers le bas sur un élément | 3 |
Événements tactiles
| un événement | La description | DOM |
|---|---|---|
| ontouchcancel | L'événement se produit lorsque le contact est interrompu | |
| ontouchend | L'événement se produit lorsqu'un doigt est retiré d'un écran tactile | |
| OnTouchMove | L'événement se produit lorsqu'un doigt est traîné à travers l'écran | |
| ontouchstart | L'événement se produit lorsqu'un doigt est placé sur un écran tactile |
Objet de l'événement
constantes
| Constante | La description | DOM |
|---|---|---|
| CAPTURING_PHASE | La phase d'événement en cours est la phase de capture (1) | 1 |
| AT_TARGET | L'événement en cours est en phase cible, soit il est en cours d' évaluation à la cible d'événement (2) | 2 |
| BUBBLING_PHASE | La phase d'événement en cours est la phase de formation de bulles (3) | 3 |
Propriétés
| Propriété | La description | DOM |
|---|---|---|
| bulles | Indique si oui ou non un événement spécifique est un événement de bouillonnement | 2 |
| résiliable | Retourne si oui ou non un événement peut avoir son action par défaut empêché | 2 |
| currentTarget | Renvoie l'élément dont les auditeurs événement a déclenché l'événement | 2 |
| DefaultPrevented | Retourne si ou non preventDefault() méthode a été appelée pour l'événement | 3 |
| eventPhase | Retours quelle phase du flux d'événements est en cours d'évaluation | 2 |
| isTrusted | Retourne si oui ou non un événement est digne de confiance | 3 |
| cible | Renvoie l'élément qui a déclenché l'événement | 2 |
| timeStamp | Retourne le temps (in milliseconds relative to the epoch) par (in milliseconds relative to the epoch) au cours de laquelle l'événement a été créé | 2 |
| type | Retourne le nom de l'événement | 2 |
| vue | Renvoie une référence à l'objet de la fenêtre où l'événement a eu lieu | 2 |
méthodes
| méthode | La description | DOM |
|---|---|---|
| preventDefault() | Pour annuler l'événement si elle est annulable, ce qui signifie que l'action par défaut qui appartient à l'événement ne se produira pas | 2 |
| stopImmediatePropagation() | Prévient les autres auditeurs du même événement d'être appelé | 3 |
| stopPropagation() | Empêche en outre la propagation d'un événement au cours de flux d'événements | 2 |
MouseEvent objet
| Propriété | La description | DOM |
|---|---|---|
| touche Alt | Indique si la "ALT" touche a été pressée lorsque l'événement de la souris a été déclenchée | 2 |
| bouton | Retours qui bouton de la souris a été enfoncée lorsque l'événement de la souris a été déclenchée | 2 |
| boutons | Retours boutons de la souris qui ont été enfoncées lorsque l'événement de la souris a été déclenchée | 3 |
| clientX | Renvoie la coordonnée horizontale du pointeur de la souris, par rapport à la fenêtre actuelle, lorsque l'événement de la souris a été déclenchée | 2 |
| clientY | Renvoie la coordonnée verticale du pointeur de la souris, par rapport à la fenêtre actuelle, lorsque l'événement de la souris a été déclenchée | 2 |
| ctrlKey | Retourne si la "CTRL" a été enfoncée lorsque l'événement de la souris a été déclenchée | 2 |
| détail | Renvoie un nombre qui indique combien de fois la souris a été cliqué | 2 |
| metaKey | Retourne si la "META" touche a été pressée quand un événement a été déclenché | 2 |
| pageX | Renvoie la coordonnée horizontale du pointeur de la souris, par rapport au document, lorsque l'événement de la souris a été déclenchée | |
| pageY | Renvoie la coordonnée verticale du pointeur de la souris, par rapport au document, lorsque l'événement de la souris a été déclenchée | |
| relatedTarget | Renvoie l'élément lié à l'élément qui a déclenché l'événement de la souris | 2 |
| screenX | Renvoie la coordonnée horizontale du pointeur de la souris, par rapport à l'écran, quand un événement a été déclenché | 2 |
| screenY | Renvoie la coordonnée verticale du pointeur de la souris, par rapport à l'écran, quand un événement a été déclenché | 2 |
| touche Majuscule | Indique si la "SHIFT" touche a été pressée quand un événement a été déclenché | 2 |
| lequel | Retours qui bouton de la souris a été enfoncée lorsque l'événement de la souris a été déclenchée | 2 |
KeyboardEvent objet
| Propriété | La description | DOM |
|---|---|---|
| touche Alt | Indique si le "ALT" a été pressé la touche lorsque l'événement clé a été déclenchée | 2 |
| ctrlKey | Retourne si la "CTRL" touche a été pressée lorsque l'événement clé a été déclenchée | 2 |
| charCode | Retourne le code de caractère Unicode de la clé qui a déclenché l'événement onkeypress | 2 |
| clé | Renvoie la valeur de clé de la clé représentée par l'événement | 3 |
| code clé | Retourne le code de caractère Unicode de la clé qui a déclenché l'événement onkeypress, ou le code Unicode clé de la clé qui a déclenché l'onkeydown ou d'un événement onkeyup | 2 |
| emplacement | Renvoie l'emplacement d'une touche du clavier ou d'un dispositif | 3 |
| metaKey | Retourne si la "meta" a été enfoncée lorsque l'événement clé a été déclenchée | 2 |
| touche Majuscule | Indique si la "SHIFT" a été enfoncée la touche lorsque l'événement clé a été déclenchée | 2 |
| lequel | Retourne le code de caractère Unicode de la clé qui a déclenché l'événement onkeypress, ou le code Unicode clé de la clé qui a déclenché l'onkeydown ou d'un événement onkeyup | 2 |
HashChangeEvent objet
| Propriété | La description | DOM |
|---|---|---|
| newURL | Renvoie l'URL du document, après le hachage a été modifié | |
| oldUrl | Renvoie l'URL du document, avant que le hachage a été changé |
PageTransitionEvent objet
| Propriété | La description | DOM |
|---|---|---|
| persisté | Vérifie si la page Web a été mis en cache par le navigateur |
FocusEvent objet
| Propriété | La description | DOM |
|---|---|---|
| relatedTarget | Renvoie l'élément lié à l'élément qui a déclenché l'événement | 3 |
AnimationEvent objet
| Propriété | La description | DOM |
|---|---|---|
| animationName | Retourne le nom de l'animation | |
| temps écoulé | Renvoie le nombre de secondes d'une animation a été en cours d'exécution |
TransitionEvent objet
| Propriété | La description | DOM |
|---|---|---|
| nom de la propriété | Retourne le nom de la propriété CSS associée à la transition | |
| temps écoulé | Renvoie le nombre de secondes une transition a été en cours d'exécution |
WheelEvent objet
| Propriété | La description | DOM |
|---|---|---|
| deltaX | Renvoie la valeur de défilement horizontal d'une roue de souris (x-axis) | 3 |
| deltaY | Renvoie la valeur de défilement vertical d'une roue de souris (y-axis) des (y-axis) | 3 |
| DeltaZ | Renvoie la quantité de défilement d'une molette de la souris pour l'axe z | 3 |
| deltaMode | Renvoie un nombre qui représente l'unité de mesure pour les valeurs delta (pixels, lines or pages) des (pixels, lines or pages) | 3 |