Skip to content

Liste des événements ​

1. Événements de la souris ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
clickonclickMouseEventLorsqu'un élément est cliqué✅
dblclickondblclickMouseEventLorsqu'un élément est double-cliqué✅
mousedownonmousedownMouseEventLorsque le bouton de la souris est enfoncé✅
mouseuponmouseupMouseEventLorsque le bouton de la souris est relâché✅
mousemoveonmousemoveMouseEventLorsque la souris est déplacée✅
mouseoveronmouseoverMouseEventLorsque la souris est au-dessus d'un élément✅
mouseoutonmouseoutMouseEventLorsque la souris sort de l'élément✅
mouseenteronmouseenterMouseEventLorsque la souris entre dans un élément (sans propagation)✅
mouseleaveonmouseleaveMouseEventLorsque la souris quitte l'élément (sans propagation)✅
contextmenuoncontextmenuMouseEventLorsque le menu contextuel est ouvert✅

2. Événements liés au pointeur ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
pointerdownonpointerdownPointerEventLorsque le pointeur (tactile, stylo, souris) est pressé✅
pointeruponpointerupPointerEventLorsque le pointeur est relâché✅
pointermoveonpointermovePointerEventLorsque le pointeur est déplacé✅
pointeroveronpointeroverPointerEventLorsque le pointeur est sur un élément✅
pointeroutonpointeroutPointerEventLorsque le pointeur sort de l'élément✅
pointerenteronpointerenterPointerEventLorsque le pointeur entre dans un élément (sans propagation)✅
pointerleaveonpointerleavePointerEventLorsque le pointeur quitte l'élément (sans propagation)✅
pointercancelonpointercancelPointerEventLorsque l'opération du pointeur est annulée✅
gotpointercaptureongotpointercapturePointerEventLorsque la capture du pointeur est acquise✅
lostpointercaptureonlostpointercapturePointerEventLorsque la capture du pointeur est perdue✅

3. Événements tactiles ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
touchstartontouchstartTouchEventLorsque l'écran est touché✅
touchmoveontouchmoveTouchEventLorsque le doigt touché se déplace✅
touchendontouchendTouchEventLorsqu'un toucher est terminé✅
touchcancelontouchcancelTouchEventLorsqu'un toucher est annulé✅

4. Événements clavier ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
keydownonkeydownKeyboardEventLorsqu'une touche est enfoncée✅
keypressonkeypressKeyboardEvent⚠️ Déprécié - Utilisez keydown à la place✅
keyuponkeyupKeyboardEventLorsqu'une touche est relâchée✅

À propos de l'événement keypress

L'événement keypress a été déprécié par les standards du web.

Raisons de la dépréciation :

  • Prise en charge insuffisante de l'internationalisation (problèmes avec la saisie en japonais, etc.)
  • Comportement instable en combinaison avec les touches de modification (Shift, Ctrl, Alt)
  • Prise en charge limitée des appareils mobiles

Alternatives recommandées :

typescript
// ❌ Déprécié
fromEvent(input, 'keypress')
  .subscribe(event => console.log(event));

// ✅ Recommandé : Utilisez keydown
fromEvent<KeyboardEvent>(input, 'keydown')
  .subscribe(event => console.log(event.key));

Événements recommandés par cas d'utilisation :

  • Détection de saisie de texte : événement input (recommandé)
  • Détection de frappe de touche : événement keydown
  • Détection de relâchement de touche : événement keyup

5. Événements liés au focus ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
focusonfocusFocusEventLorsqu'un élément reçoit le focus✅
bluronblurFocusEventLorsqu'un élément perd le focus✅
focusinonfocusinFocusEventLorsqu'un élément ou un élément enfant reçoit le focus✅
focusoutonfocusoutFocusEventLorsqu'un élément ou un élément enfant perd le focus✅

6. Événements de formulaire ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
changeonchangeEventLorsque le contenu de l'entrée est modifié✅
inputoninputInputEventLorsque la valeur d'un champ de saisie est modifiée✅
submitonsubmitSubmitEventLorsque le formulaire est soumis✅
resetonresetEventLorsque le formulaire est réinitialisé✅
selectonselectEventLorsque du texte est sélectionné✅

7. Événements de glisser-déposer ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
dragondragDragEventPendant que l'élément est glissé✅
dragstartondragstartDragEventLorsqu'un glissement commence✅
dragendondragendDragEventLorsque le glissement se termine✅
dragoverondragoverDragEventLorsque l'élément glissé est au-dessus d'un autre élément✅
dragenterondragenterDragEventLorsque l'élément glissé entre dans la cible✅
dragleaveondragleaveDragEventLorsque l'élément glissé quitte la cible✅
dropondropDragEventLorsque l'élément glissé est déposé✅

8. Événements de fenêtre et de document ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
loadonloadEventLorsque la page est complètement chargée✅
resizeonresizeUIEventLorsque la fenêtre est redimensionnée✅
scrollonscrollEventLorsqu'une page défile✅
unloadonunloadEventLorsque la page est fermée❌
beforeunloadonbeforeunloadBeforeUnloadEventJuste avant la fermeture de la page❌
erroronerrorErrorEventLorsqu'une erreur se produit✅
visibilitychangeonvisibilitychangeEventLorsque l'état d'affichage de la page change (par ex., changement d'onglet)✅
fullscreenchangeonfullscreenchangeEventLorsque l'état plein écran change✅

9. Événements média ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
playonplayEventLorsque la lecture du média commence✅
pauseonpauseEventLorsque la lecture du média est mise en pause✅
endedonendedEventLorsque la lecture du média se termine✅
volumechangeonvolumechangeEventLorsque le volume du média est modifié✅
seekingonseekingEventLorsque la recherche dans le média commence✅
seekedonseekedEventLorsque la recherche dans le média est terminée✅
timeupdateontimeupdateEventLorsque le temps de lecture du média est mis à jour✅

10. Événements d'animation et de transition ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
animationstartonanimationstartAnimationEventLorsqu'une animation commence✅
animationendonanimationendAnimationEventLorsque l'animation se termine✅
animationiterationonanimationiterationAnimationEventLorsque l'animation est répétée✅
transitionstartontransitionstartTransitionEventLorsqu'une transition CSS commence✅
transitionendontransitionendTransitionEventLorsqu'une transition CSS se termine✅

11. Autres événements ​

Nom de l'événement JavaScriptAttribut HTMLTypeDescriptionDisponible dans fromEvent
wheelonwheelWheelEventLorsque la molette de la souris est tournée✅
abortonabortUIEventLorsque le chargement d'une ressource est interrompu✅
hashchangeonhashchangeHashChangeEventLorsque le hash de l'URL (par ex. #section1) est modifié✅
messageonmessageMessageEventLorsqu'un message est reçu des Web Workers ou des iframes❌
onlineononlineEventLorsque le réseau est de nouveau en ligne✅
offlineonofflineEventLorsque le réseau passe hors ligne✅
popstateonpopstatePopStateEventLorsqu'un changement d'état se produit via history.pushState ou history.back❌
storageonstorageStorageEventLorsque localStorage ou sessionStorage est modifié❌
languagechangeonlanguagechangeEventLorsque le paramètre de langue est modifié (changement de paramètre du navigateur)❌

Publié sous licence CC-BY-4.0.