React Events List
In this guide, we provide a comprehensive list of React events categorised by their type:
Form Events
onChange
: Fires when the value of an input, select, or textarea changes.onInput
: Fires when the user provides input.onInvalid
: Fires when a form element’s validity changes.onSubmit
: Fires when a form is submitted.onReset
: Fires when a form is reset.onFocus
: Fires when an element gains focus.onBlur
: Fires when an element loses focus.
Mouse Events
onClick
: Fires when a mouse button is clicked.onContextMenu
: Fires when a context menu is triggered.onDoubleClick
: Fires when a mouse button is double-clicked.onMouseDown
: Fires when a mouse button is pressed.onMouseUp
: Fires when a mouse button is released.onMouseEnter
: Fires when the mouse enters an element.onMouseLeave
: Fires when the mouse leaves an element.onMouseMove
: Fires when the mouse moves within an element.onMouseOver
: Fires when the mouse is over an element or its children.onMouseOut
: Fires when the mouse leaves an element or its children.
Keyboard Events
onKeyDown
: Fires when a key is pressed.onKeyPress
: Deprecated in modern React versions (useonKeyDown
instead).onKeyUp
: Fires when a key is released.
Focus Events
onFocus
: Fires when an element gains focus.onBlur
: Fires when an element loses focus.
Touch Events
onTouchStart
: Fires when a touch point is placed on the touch surface.onTouchMove
: Fires when a touch point is moved along the touch surface.onTouchEnd
: Fires when a touch point is removed from the touch surface.onTouchCancel
: Fires when a touch point is interrupted.
UI Events
onScroll
: Fires when an element’s scrollbar is scrolled.
Clipboard Events
onCopy
: Fires when the content is copied.onCut
: Fires when the content is cut.onPaste
: Fires when the content is pasted.
Composition Events
onCompositionStart
: Fires when text composition starts.onCompositionUpdate
: Fires when text composition is updated.onCompositionEnd
: Fires when text composition ends.
Drag and Drop Events
onDrag
: Fires when an element is dragged.onDragStart
: Fires when dragging starts.onDragEnd
: Fires when dragging ends.onDragEnter
: Fires when a dragged element enters a valid drop target.onDragLeave
: Fires when a dragged element leaves a valid drop target.onDragOver
: Fires continuously as a dragged element is over a valid drop target.onDrop
: Fires when a dragged element is dropped.
Image Events
onLoad
: Fires when an image or external resource is loaded.onError
: Fires when there is an error loading an image or external resource.
Media Events
onAbort
: Fires when the loading of a media resource is aborted.onCanPlay
: Fires when the browser can start playing media.onCanPlayThrough
: Fires when the browser estimates it can play through the media without stopping for buffering.onDurationChange
: Fires when the duration of the media changes.onEmptied
: Fires when the media resource becomes empty.onEnded
: Fires when playback of the media ends.onLoadedData
: Fires when media data is loaded.onLoadedMetadata
: Fires when media metadata is loaded.onLoadStart
: Fires when the browser starts loading media data.onPause
: Fires when media playback is paused.onPlay
: Fires when media playback starts or resumes.onPlaying
: Fires when media playback is playing.onProgress
: Fires periodically as media is being downloaded.onRateChange
: Fires when the playback rate changes.onSeeked
: Fires when the seeking operation ends.onSeeking
: Fires when a seeking operation begins.onStalled
: Fires when the browser is trying to fetch media data, but data is not coming fast enough.onSuspend
: Fires when the browser intentionally halts downloading media data.onTimeUpdate
: Fires when the playback position changes.onVolumeChange
: Fires when the volume changes.onWaiting
: Fires when media playback is delayed.
Pointer Events
onPointerDown
: Fires when a pointer button is pressed.onPointerMove
: Fires when a pointer is moved.onPointerUp
: Fires when a pointer button is released.onPointerCancel
: Fires when the pointer is canceled.onPointerEnter
: Fires when a pointer enters an element.onPointerLeave
: Fires when a pointer leaves an element.onPointerOver
: Fires when a pointer is over an element or its children.onPointerOut
: Fires when a pointer leaves an element or its children.
Wheel Events
onWheel
: Fires when the mouse wheel or trackpad is used to scroll.
Animation Events
onAnimationStart
: Fires when a CSS animation starts.onAnimationEnd
: Fires when a CSS animation ends.onAnimationIteration
: Fires when a CSS animation repeats.
Transition Events
onTransitionEnd
: Fires when a CSS transition ends.