Skip to main content

Listenable Events

Source: reactjs.org

Clipboard Events​

# Event names:
onCopy onCut onPaste

# Properties:
DOMDataTransfer clipboardData

Composition Events​

# Event names:
onCompositionEnd onCompositionStart onCompositionUpdate
# Properties:
string data

Keyboard Events​

# Event names:
onKeyDown onKeyPress onKeyUp

# Properties:
boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

The key property can take any of the values documented in the DOM Level 3 Events spec (w3.org).

Focus Events​

# Event names:
onFocus onBlur
# These focus events work on all elements in the React DOM, not just form elements.

# Properties:
DOMEventTarget relatedTarget

See: onFocus (reactjs.org) and onBlur(reactjs.org)

Form Events​

# Event names:
onChange onInput onInvalid onSubmit

For more information about the onChange event, see Forms (reactjs.org)

Generic Events​

# Events names
onError onLoad

Mouse Events​

# Event names:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.

# Properties:
boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Selection Events​

# Event names:
onSelect

Touch Events​

# Event names:
onTouchCancel onTouchEnd onTouchMove onTouchStart

# Properties:
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

UI Events​

# Event names:
onScroll

# Properties:
number detail
DOMAbstractView view
note

Starting with React 17, the onScroll event does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.

Wheel Events​

# Event names:
onWheel

# Properties:
number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events​

# Event names:
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting

Image Events​

# Event names:
onLoad onError

Animation Events​

# Event names:
onAnimationStart onAnimationEnd onAnimationIteration

# Properties:
string animationName
string pseudoElement
float elapsedTime

Transition Events​

# Event names:
onTransitionEnd

# Properties:
string propertyName
string pseudoElement
float elapsedTime

Other Events​

# Event names:
onToggle