English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les événements DOM sont envoyés pour informer le code des événements intéressants qui se produisent.
Les événements sont généralement utilisés avec des fonctionnalités et ne sont pas exécutées avant l'événement (par exemple, lorsque l'utilisateur clique sur un bouton).
Les événements peuvent représenter tout, de l'interaction de base de l'utilisateur à des notifications automatiques de ce qui se passe dans le modèle de présentation.
| Nom de l'activité | Description | Type d'événement |
|---|---|---|
| abort | Cet événement se produit lorsque le chargement des ressources a été interrompu | UiEvent, Event |
| afterprint | Cet événement se produit lorsque le document concerné a commencé à être imprimé ou que l'aperçu avant impression a été fermé | Event |
| animationend | Cet événement se produit lorsque l'animation CSS est terminée | AnimationEvent |
| animationiteration | Cet événement se produit lors de la répétition d'une animation CSS | AnimationEvent |
| animationstart | Cet événement se produit lorsque l'animation CSS commence | AnimationEvent |
| beforeprint | Cet événement se produit lorsque le document concerné est prêt à être imprimé ou affiché pour impression | Event |
| beforeunload | Cet événement se produit lorsque la fenêtre, le document et ses ressources sont sur le point d'être déschargés | UiEvent, Event |
| blur | Cet événement se produit lorsque l'élément perd le focus (ne bubbling pas) | FocusEvent |
| canplay | Cet événement se produit lorsque le navigateur peut commencer à jouer le média (quand il a suffisamment de buffering pour commencer à jouer) | Event |
| canplaythrough | Cet événement se produit lorsque le navigateur peut jouer le média sans arrêter le buffering | Event |
| change | Cet événement se produit lorsque le contenu de l'état sélectionné ou sélectionné d'un élément de formulaire change (pour<input>, <select>et <textarea>) | Event |
| click | Cet événement se produit lorsque l'utilisateur clique sur un élément | MouseEvent |
| contextmenu | Cet événement se produit lorsque l'utilisateur clique avec le bouton droit sur un élément pour ouvrir le menu contextuel | MouseEvent |
| copy | Cet événement se produit lorsque l'utilisateur copie le contenu d'un élément | ClipboardEvent |
| cut | Cet événement se produit lorsque l'utilisateur coupe le contenu d'un élément | ClipboardEvent |
| dblclick | Cet événement se produit lorsque l'utilisateur double-clique sur un élément | MouseEvent |
| drag | Cet événement se produit lors du glisser-déposer d'un élément | DragEvent |
| dragend | Cet événement se produit lorsque l'utilisateur termine le glisser-déposer | DragEvent |
| dragenter | Cet événement se produit lorsque l'élément glissé entre dans la cible de dépôt | DragEvent |
| dragleave | Cet événement se produit lorsque l'élément glissé quitte la cible de dépôt | DragEvent |
| dragover | Cet événement se produit lorsque l'élément glissé est au-dessus de la cible de dépôt | DragEvent |
| dragstart | Cet événement se produit lorsque l'utilisateur commence à glisser un élément | DragEvent |
| drop | Cet événement se produit lorsque l'élément glissé est placé sur la cible de dépôt | DragEvent |
| durationchange | Cet événement se produit lorsque la durée du média change | Event |
| ended | Cet événement se produit lorsque le média atteint la fin de lecture (utile pour des messages comme 'Merci d'avoir écouté') | Event |
| error | Cet événement se produit lorsque le chargement des ressources échoue | ProgressEvent, UiEvent, Event |
| focus | Cet événement se produit lorsque l'élément a le focus (ne bubbling pas) | FocusEvent |
| focusin | Cet événement se produit lorsque l'élément est sur le point de recevoir le focus | FocusEvent |
| focusout | Cet événement se produit lorsque l'élément est sur le point de perdre le focus | FocusEvent |
| fullscreenchange | Un événement se produit lorsque l'élément est affiché en mode plein écran | Event |
| fullscreenerror | Cet événement se produit lorsque l'élément ne peut pas être affiché en mode plein écran | Event |
| hashchange | Cet événement se produit lorsque la partie ancre de l'URL change | HashChangeEvent |
| input | Un événement se produit lorsque l'élément reçoit une entrée utilisateur | InputEvent, Event |
| invalid | Cet événement se produit lorsque l'élément est invalide | Event |
| keydown | Cet événement se produit lorsque l'utilisateur appuie sur une touche | KeyboardEvent |
| keypress | Un événement se produit lorsque l'utilisateur appuie sur une touche | KeyboardEvent |
| keyup | un événement se produit lorsque l'utilisateur relâche une touche | KeyboardEvent |
| load | un événement se produit lorsque l'objet est chargé | UiEvent, Event |
| loadeddata | un événement se produit lors du chargement des données de média | Event |
| loadedmetadata | un événement se produit lors du chargement des métadonnées (comme les dimensions et la durée) | Event |
| loadstart | un événement se produit lorsque le navigateur commence à chercher le média spécifié | ProgressEvent |
| message | un événement se produit lorsque l'on reçoit un message via l'origine de l'événement | Event |
| mousedown | un événement se produit lorsque l'utilisateur appuie sur le bouton de la souris sur un élément | MouseEvent |
| mouseenter | un événement se produit lorsque le pointeur se déplace sur un élément | MouseEvent |
| mouseleave | un événement se produit lorsque le pointeur quitte un élément | MouseEvent |
| mousemove | un événement se produit lorsque le pointeur se déplace au-dessus d'un élément | MouseEvent |
| mouseover | un événement se produit lorsque le pointeur se déplace sur un élément ou l'un de ses éléments enfants | MouseEvent |
| mouseout | un événement se produit lorsque l'utilisateur déplace le pointeur de la souris hors d'un élément ou de l'un de ses éléments enfants | MouseEvent |
| mouseup | un événement se produit lorsque l'utilisateur relâche le bouton de la souris sur un élément | MouseEvent |
| mousewheel | non recommandépasser à l'événement wheel | WheelEvent |
| offline | un événement se produit lorsque le navigateur commence à travailler hors ligne | Event |
| online | un événement se produit lorsque le navigateur commence à travailler en ligne | Event |
| open | un événement se produit lors de l'ouverture de la connexion avec l'origine de l'événement | Event |
| pagehide | un événement se produit lorsque l'utilisateur quitte la navigation sur la page | PageTransitionEvent |
| affichage de la page | un événement se produit lorsque l'utilisateur navigue vers une page web | PageTransitionEvent |
| paste | un événement se produit lorsque l'utilisateur colle du contenu dans un élément | ClipboardEvent |
| pause | un événement se produit lorsque l'utilisateur ou le programme met en pause le média | Event |
| play | un événement se produit lorsque le média démarre ou n'est plus mis en pause | Event |
| playing | un événement se produit lorsque le média est joué après avoir mis en pause ou arrêté le bufferage du média | Event |
| popstate | un événement se produit lorsque l'historique de la fenêtre change | PopStateEvent |
| progress | un événement se produit lorsque le navigateur est en train de récupérer des données de média (télécharger le média) | Event |
| ratechange | un événement se produit lors du changement de la vitesse de lecture du média | Event |
| resize | un événement se produit lors de l'ajustement de la taille de la vue du document | UiEvent, Event |
| reset | un événement se produit lors du réinitialisation du formulaire | Event |
| scroll | un événement se produit lorsque l'utilisateur déplace la barre de défilement d'un élément | UiEvent, Event |
| search | un événement se produit lorsque l'utilisateur saisit du contenu dans le champ de recherche (pour<input="search">), | Event |
| seeked | lorsque l'utilisateur termine son déplacement/un événement se produit lorsque l'utilisateur saute à une nouvelle position dans le média | Event |
| seeking | lorsque l'utilisateur commence à se déplacer/un événement se produit lorsque l'utilisateur saute à une nouvelle position dans le média | Event |
| select | Un événement se produit après que l'utilisateur ait sélectionné certains textes (pour<input>et<textarea>), | UiEvent, Event |
| show | Cet événement se produit lorsque l'élément <menu> est affiché comme un menu contextuel | Event |
| stalled | Cet événement se produit lorsque le navigateur essaie de récupérer des données de média mais que les données ne sont pas disponibles | Event |
| storage | Cet événement se produit lors de la mise à jour de la zone de stockage Web | StorageEvent |
| submit | Cet événement se produit lors de la soumission du formulaire | Event |
| suspend | Cet événement se produit lorsque le navigateur choisit de ne pas obtenir des données de média | Event |
| timeupdate | Cet événement se produit lorsque la position de lecture change (par exemple, lorsque l'utilisateur avance rapidement à un autre point dans le média) | Event |
| toggle | Cet événement se produit lorsque l'utilisateur ouvre ou ferme l'élément <details> | Event |
| touchcancel | Cet événement se produit lorsque le toucher est interrompu | TouchEvent |
| touchend | Cet événement se produit lorsque le doigt est levé de l'écran tactile | TouchEvent |
| touchmove | Cet événement se produit lorsque le doigt glisse sur l'écran | TouchEvent |
| touchstart | Cet événement se produit lorsque le doigt est placé sur l'écran tactile | TouchEvent |
| transitionend | Cet événement se produit lorsque la transition CSS est terminée. | TransitionEvent |
| unload | Cet événement se produit lorsque le document ou la ressource dépendante est déschargé | UiEvent, Event |
| volumechange | Cet événement se produit lorsque le volume du média a changé (y compris le volume mis au silence) | Event |
| waiting | Cet événement se produit lorsque le média est en pause mais est prévu de se rétablir (par exemple, lorsque le média est mis en pause pour缓冲 plus de données) | Event |
| wheel | Cet événement se produit lorsque le curseur de la souris roule vers le haut ou vers le bas sur l'élément | WheelEvent |
Le tableau suivant liste les propriétés des événements DOM :
| Propriétés | Description | Type d'événement |
|---|---|---|
| altKey | Retourne si la touche "ALT" a été pressée lors de l'activation de l'événement souris | MouseEvent |
| altKey | Retourne si la touche "ALT" a été pressée lors de l'activation de l'événement clé | KeyboardEvent, TouchEvent |
| animationName | Retourne le nom de l'animation | AnimationEvent |
| bubbles | Retourne si l'événement spécifique est un événement de bulle | Event |
| button | Retourne le bouton de la souris appuyé lors de l'événement souris. | MouseEvent |
| buttons | Retourne le bouton de la souris appuyé lors de l'événement souris. | MouseEvent |
| cancelable | Retourne si l'événement peut empêcher son opération par défaut | Event |
| charCode | Retourne le code de caractère Unicode de la touche qui a déclenché l'événement onkeypress | KeyboardEvent |
| changeTouches | Retourne la liste de tous les objets de touche qui ont changé d'état entre la touche précédente et la touche actuelle | TouchEvent |
| clientX | Retourne l'ordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante lors de l'activation de l'événement souris | MouseEvent, TouchEvent |
| clientY | Retourne l'abscisse verticale du pointeur de la souris par rapport à la fenêtre courante lors de l'activation de l'événement souris | MouseEvent, TouchEvent |
| clipboardData | Retourne un objet contenant les données affectées par l'opération de presse-papiers | ClipboardData |
| code | Retourne le code de la touche qui a déclenché l'événement | KeyboardEvent |
| composed | Retourne si l'événement est composé | Event |
| ctrlKey | Retourne si la touche "CTRL" a été pressée lors de l'activation de l'événement souris | MouseEvent |
| ctrlKey | Renvoie si la touche 'CTRL' a été pressée lors de l'événement de frappe de clavier | KeyboardEvent, TouchEvent |
| currentTarget | Renvoie l'élément qui déclenche l'événement de l'écouteur d'événement | Event |
| data | Renvoie le caractère inséré | InputEvent |
| dataTransfer | Renvoie un objet contenant ce qui doit être glissé-déplacé/Données insérées ou supprimées | DragEvent, InputEvent |
| defaultPrevented | Renvoie si la méthode preventDefault() a été appelée pour l'événement | Event |
| deltaX | Renvoie la quantité de défilement horizontal de la molette de la souris (axe x) | WheelEvent |
| deltaY | Renvoie la quantité de défilement vertical de la molette de la souris (axe y) | WheelEvent |
| deltaZ | Renvoie la quantité de défilement de la molette de la souris sur l'axe Z | WheelEvent |
| deltaMode | Renvoie un nombre indiquant l'unité de mesure de la valeur de l'incrément (pixels, lignes ou pages) | WheelEvent |
| detail | Renvoie un nombre indiquant le nombre de fois où la souris a été cliquée | UiEvent |
| elapsedTime | Renvoie les secondes écoulées depuis le début de l'animation | AnimationEvent |
| elapsedTime | Renvoie les secondes écoulées depuis le début de la transition | |
| eventPhase | Renvoie哪个阶段正在评估事件流 | Event |
| inputType | Renvoie le type de modification (c'est-à-dire 'insertion' ou 'suppression') | InputEvent |
| isComposing | Renvoie si l'état de l'événement est en cours de composition | InputEvent, KeyboardEvent |
| isTrusted | Renvoie si l'événement est fiable | Event |
| key | Renvoie la valeur de la touche de l'événement | KeyboardEvent |
| key | Renvoie la clé de l'élément de stockage modifié | StorageEvent |
| keyCode | Retourne le code Unicode du caractère déclencheur de l'événement onkeypress, ou le code de touche Unicode déclencheur des événements onkeydown ou onkeyup. | KeyboardEvent |
| location | Renvoie la position de la touche sur le clavier ou l'appareil | KeyboardEvent |
| lengthComputable | Renvoie si la longueur de la progression peut être calculée | ProgressEvent |
| loaded | Renvoie la quantité de travail chargée | ProgressEvent |
| metaKey | Renvoie si la touche 'META' a été pressée lors de l'événement | MouseEvent |
| metaKey | Renvoie si la touche 'meta' a été pressée lors de l'événement de frappe de clavier | KeyboardEvent, TouchEvent |
| MovementX | Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la position de l'événement mousemove précédent | MouseEvent |
| MovementY | Renvoie la coordonnée verticale du pointeur de la souris par rapport à la position de l'événement mousemove précédent | MouseEvent |
| newValue | Renvoie la nouvelle valeur de l'élément de stockage modifié | StorageEvent |
| newURL | Renvoie l'URL du document après la modification de l'hash | HasChangeEvent |
| offsetX | Renvoie la coordonnée horizontale de la position du pointeur de la souris par rapport à la marge de l'élément cible | MouseEvent |
| offsetY | Renvoie la coordonnée verticale de la position du pointeur de la souris par rapport à la marge de l'élément cible | MouseEvent |
| oldValue | Renvoie la valeur ancienne de l'élément de stockage modifié | StorageEvent |
| oldURL | Renvoie l'URL du document avant la modification de l'hash | HasChangeEvent |
| onemptied | Cet événement se produit lorsque survient une situation problématique et que le fichier média devient soudainement inutilisable (par exemple, une connexion accidentelle est interrompue). | |
| pageX | Retourne l'abscisse du pointeur de la souris par rapport au document lors de l'événement souris. | MouseEvent |
| pageY | Retourne l'ordonnée du pointeur de la souris par rapport au document lors de l'événement souris. | MouseEvent |
| persisted | Retourne si la page est stockée dans le cache du navigateur. | PageTransitionEvent |
| propertyName | Retourne le nom de la propriété CSS associée à l'animation ou à la transition. | AnimationEvent, TransitionEvent |
| pseudoElement | Retourne le nom du pseudo-élément de l'animation ou de la transition. | AnimationEvent, TransitionEvent |
| region | MouseEvent | |
| relatedTarget | Retourne l'élément lié à l'élément qui a déclenché l'événement souris. | MouseEvent |
| relatedTarget | Retourne l'élément lié à l'élément déclencheur de l'événement. | FocusEvent |
| repeat | Retourne si une touche est maintenue enfoncée. | KeyboardEvent |
| screenX | Retourne l'ordonnée du pointeur de la souris par rapport à l'écran lors de l'événement. | MouseEvent |
| screenY | Retourne l'abscisse du pointeur de la souris par rapport à l'écran lors de l'événement. | MouseEvent |
| shiftKey | Retourne si la touche 'SHIFT' est appuyée lors de l'événement. | MouseEvent |
| shiftKey | Retourne si la touche 'SHIFT' est appuyée lors de l'événement de frappe de clé. | KeyboardEvent, TouchEvent |
| state | Retourne un objet contenant une copie de l'entrée d'historique. | PopStateEvent |
| storageArea | Retourne un objet représentant l'objet de stockage affecté. | StorageEvent |
| target | Retourne l'élément déclencheur de l'événement. | Event |
| targetTouches | Retourne la liste de tous les objets de touche en contact avec la surface et les objets de touche qui ont déclenché l'événement touchstart sur l'élément cible actuel. | TouchEvent |
| timeStamp | Retourne le temps de création de l'événement (en millisecondes par rapport à l'époque). | Event |
| total | Retourne la quantité totale de travail à charger. | ProgressEvent |
| touches | Retourne la liste de tous les objets de touche en contact avec la surface actuelle. | TouchEvent |
| transitionend | Cet événement se produit lorsque la transition CSS est terminée. | TransitionEvent |
| type | Retourne le nom de l'événement. | Event |
| url | Retourne l'URL du document du projet modifié. | StorageEvent |
| which | Retourne le bouton de la souris appuyé lors de l'événement souris. | MouseEvent |
| which | Retourne le code Unicode du caractère déclencheur de l'événement onkeypress, ou le code de touche Unicode déclencheur des événements onkeydown ou onkeyup. | KeyboardEvent |
| view | Retourne une référence à l'objet Window où s'est produit l'événement | UiEvent |
Le tableau suivant liste les méthodes des événements DOM :
| Méthode | Description | Type d'événement |
|---|---|---|
| createEvent() | Créer un nouvel événement | Event |
| getTargetRanges() | Retourne un tableau contenant la gamme cible, qui sera affectée par l'insertion/Impact de la suppression | InputEvent |
| getModifierState() | Retourne un tableau contenant la gamme cible, qui sera affectée par l'insertion/Impact de la suppression | MouseEvent |
| preventDefault() | Empêcher le navigateur d'exécuter l'opération par défaut du élément sélectionné | Event |
| stopImmediatePropagation() | Empêcher d'autres écouteurs d'événements pour le même événement d'être appelés | Event |
| stopPropagation() | Empêcher la propagation de l'événement dans le flux d'événements | Event |
Tutoriel Javascript :Événements Javascript
Tutoriel Javascript :Écouteur d'événements
Tutoriel Javascript :Propagation des événements