Defining React Node Events

Events can be added to React nodes much like events can be added to DOM nodes. In the code example below I am adding a very simple click and mouseover event to a React <div> node.

Note how the property name for an event in React starts with 'on' and is passed in the props argument object to the ReactElement() function.

React creates what it calls a SyntheticEvent for each event, which contains the details for the event. Similar to the details that are define for DOM events. The SyntheticEvent instance, for an event, is passed into the events handlers/callback functions. In the code below I am logging the details of a SyntheticEvent instance.

Every syntheticEvent object instance has the following properties.

bubbles
cancelable
DOMEventTarget currentTarget
defaultPrevented
eventPhase
isTrusted
DOMEvent nativeEvent
void preventDefault()
isDefaultPrevented()
void stopPropagation()
isPropagationStopped()
DOMEventTarget target
timeStamp
type


Additionally properties are available depending upon the type/category of event that is used. For example the onClick syntheticEvent event also contains the following properties.

altKey
button
buttons
clientX
clientY
ctrlKey
getModifierState(key)
metaKey
pageX
pageY
DOMEventTarget relatedTarget
screenX
screenY
shiftKey


The table below outlines the unique syntheticEvent properties for each type/category of events.

React supports the following events:

Event Type/Category:Events:Event Specific Properties:

Clipboard

onCopy, onCut, onPasteDOMDataTransfer, clipboardData

Composition

onCompositionEnd, onCompositionStart, onCompositionUpdatedata

Keyboard

onKeyDown, onKeyPress, onKeyUpaltKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which

Focus

onChange, onInput, onSubmitDOMEventTarget, relatedTarget

Form

onFocus, onBlur

Mouse

onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave onMouseMove, onMouseOut, onMouseOver, onMouseUpaltKey, button, buttons, clientX, clientY, ctrlKey, getModifierState(key), metaKey, pageX, pageY, DOMEventTarget relatedTarget, screenX, screenY, shiftKey,

Selection

onSelect

Touch

onTouchCancel, onTouchEnd, onTouchMove, onTouchStartaltKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches,

UI

onScrolldetail, DOMAbstractView view

Wheel

onWheeldeltaMode, deltaX, deltaY, deltaZ,

Media

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

Image

onLoad, onError

Animation

onAnimationStart, onAnimationEnd, onAnimationIterationanimationName, pseudoElement, elapsedTime

Transition

onTransitionEndpropertyName, pseudoElement, elapsedTime

Notes

• React normalizes events so that they behave consistently across different browsers.
• Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word "Capture" to the event name (e.g., onClick would become onClickCapture).
• If you need the browser event details you can access this by using the nativeEvent property found in the SyntheticEvent object passed into React event hander/callback.
• React does not actually attach events to the to the nodes themselves, it uses event delegation.
• e.stopPropagation() or e.preventDefault() should be triggered manually to stop event propagation instead of returning false;.
• Not all DOM events are provided by React. But you can still make use of them using React lifecycle methods.

‍