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 (use onKeyDown 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.