Skip to content

List of Events ​

1. Mouse Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
clickonclickMouseEventWhen an element is clicked✅
dblclickondblclickMouseEventWhen an element is double-clicked✅
mousedownonmousedownMouseEventWhen the mouse button is pressed✅
mouseuponmouseupMouseEventWhen the mouse button is released✅
mousemoveonmousemoveMouseEventWhen the mouse is moved✅
mouseoveronmouseoverMouseEventWhen the mouse is over an element✅
mouseoutonmouseoutMouseEventWhen the mouse moves out of the element✅
mouseenteronmouseenterMouseEventWhen the mouse enters an element (without bubbling)✅
mouseleaveonmouseleaveMouseEventWhen the mouse leaves the element (no bubbling)✅
contextmenuoncontextmenuMouseEventWhen the right-click menu is opened✅

2. Pointer Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
pointerdownonpointerdownPointerEventWhen the pointer (touch, pen, mouse) is pressed✅
pointeruponpointerupPointerEventWhen the pointer is released✅
pointermoveonpointermovePointerEventWhen the pointer is moved✅
pointeroveronpointeroverPointerEventWhen the pointer is on an element✅
pointeroutonpointeroutPointerEventWhen the pointer moves out of the element✅
pointerenteronpointerenterPointerEventWhen the pointer enters an element (without bubbling)✅
pointerleaveonpointerleavePointerEventWhen the pointer leaves the element (no bubbling)✅
pointercancelonpointercancelPointerEventWhen the pointer operation is canceled✅
gotpointercaptureongotpointercapturePointerEventWhen the pointer capture is acquired✅
lostpointercaptureonlostpointercapturePointerEventWhen the pointer capture is lost✅

3. Touch Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
touchstartontouchstartTouchEventWhen the screen is touched✅
touchmoveontouchmoveTouchEventWhen the touched finger moves✅
touchendontouchendTouchEventWhen a touch is terminated✅
touchcancelontouchcancelTouchEventWhen a touch is canceled✅

4. Keyboard Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
keydownonkeydownKeyboardEventWhen a key is pressed✅
keypressonkeypressKeyboardEvent⚠️ Deprecated - Use keydown instead✅
keyuponkeyupKeyboardEventWhen a key is released✅

About the keypress Event

The keypress event has been deprecated by web standards.

Reasons for deprecation:

  • Insufficient internationalization support (problems with Japanese input, etc.)
  • Unstable behavior in combination with modifier keys (Shift, Ctrl, Alt)
  • Limited support for mobile devices

Recommended alternatives:

typescript
// ❌ Deprecated
fromEvent(input, 'keypress')
  .subscribe(event => console.log(event));

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

Recommended events by use case:

  • Detection of text input: input event (recommended)
  • Detection of keystroke: keydown event
  • Detection of key release: keyup event
JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
focusonfocusFocusEventWhen an element receives focus✅
bluronblurFocusEventWhen an element loses focus✅
focusinonfocusinFocusEventWhen an element or child element receives focus✅
focusoutonfocusoutFocusEventWhen an element or child element loses focus✅

6. Form Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
changeonchangeEventWhen the input content is changed✅
inputoninputInputEventWhen the value of an input field is changed✅
submitonsubmitSubmitEventWhen the form is submitted✅
resetonresetEventWhen the form is reset✅
selectonselectEventWhen text is selected✅

7. Drag & Drop Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
dragondragDragEventWhile the element is being dragged✅
dragstartondragstartDragEventWhen a drag is started✅
dragendondragendDragEventWhen the dragging ends✅
dragoverondragoverDragEventWhen the dragged element is on top of another element✅
dragenterondragenterDragEventWhen the dragged element enters the target✅
dragleaveondragleaveDragEventWhen the dragged element is off the target✅
dropondropDragEventWhen the dragged element is dropped✅

8. Window & Document Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
loadonloadEventWhen the page is completely loaded✅
resizeonresizeUIEventWhen the window is resized✅
scrollonscrollEventWhen a page is scrolled✅
unloadonunloadEventWhen the page is closed❌
beforeunloadonbeforeunloadBeforeUnloadEventJust before the page is closed❌
erroronerrorErrorEventWhen an error occurs✅
visibilitychangeonvisibilitychangeEventWhen the page display state changes (e.g., switching tabs)✅
fullscreenchangeonfullscreenchangeEventWhen the full-screen status changes✅

9. Media Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
playonplayEventWhen media playback starts✅
pauseonpauseEventWhen media playback is paused✅
endedonendedEventWhen media playback ends✅
volumechangeonvolumechangeEventWhen media volume is changed✅
seekingonseekingEventWhen seeking of media is started✅
seekedonseekedEventWhen media seek is completed✅
timeupdateontimeupdateEventWhen the media playback time is updated✅

10. Animation & Transition Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
animationstartonanimationstartAnimationEventWhen an animation starts✅
animationendonanimationendAnimationEventWhen the animation ends✅
animationiterationonanimationiterationAnimationEventWhen the animation is repeated✅
transitionstartontransitionstartTransitionEventWhen a CSS transition starts✅
transitionendontransitionendTransitionEventWhen a CSS transition ends✅

11. Other Events ​

JavaScript Event NameHTML AttributeTypeDescriptionAvailable in fromEvent
wheelonwheelWheelEventWhen the mouse wheel is rotated✅
abortonabortUIEventWhen resource loading is interrupted✅
hashchangeonhashchangeHashChangeEventWhen the URL hash (e.g. #section1) is changed✅
messageonmessageMessageEventWhen a message is received from Web Workers or iframes❌
onlineononlineEventWhen the network comes back online✅
offlineonofflineEventWhen the network goes offline✅
popstateonpopstatePopStateEventWhen a state change occurs due to history.pushState or history.back❌
storageonstorageStorageEventWhen localStorage or sessionStorage is changed❌
languagechangeonlanguagechangeEventWhen the language setting is changed (browser setting change)❌

Released under the CC-BY-4.0 license.