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.

source code

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 defined 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.

source code

Every SyntheticEvent object instance has the following properties.

  1. boolean bubbles
  2. boolean cancelable
  3. DOMEventTarget currentTarget
  4. boolean defaultPrevented
  5. number eventPhase
  6. boolean isTrusted
  7. DOMEvent nativeEvent
  8. void preventDefault()
  9. boolean isDefaultPrevented()
  10. void stopPropagation()
  11. boolean isPropagationStopped()
  12. DOMEventTarget target
  13. number timeStamp
  14. string type

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

  1. boolean altKey
  2. number button
  3. number buttons
  4. number clientX
  5. number clientY
  6. boolean ctrlKey
  7. boolean getModifierState(key)
  8. boolean metaKey
  9. number pageX
  10. number pageY
  11. DOMEventTarget relatedTarget
  12. number screenX
  13. number screenY
  14. boolean shiftKey

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


















































































Event Type/Category:Events:Event Specific Properties:

Clipboard

 onCopy, onCut, onPaste DOMDataTransfer, clipboardData

Composition

 onCompositionEnd, onCompositionStart, onCompositionUpdate data

Keyboard

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

Focus

 onChange, onInput, onSubmit DOMEventTarget, relatedTarget

Form

 onFocus, onBlur

Mouse

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

Selection

 onSelect

Touch

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

UI

 onScroll
detail,
DOMAbstractView view

Wheel

 onWheel
deltaMode,
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, onAnimationIteration
animationName,
pseudoElement,
elapsedTime

Transition

 onTransitionEnd
propertyName,
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 doesn’t actually attach events to the nodes themselves, it uses event delegation.
  • e.stopPropagation() or e.preventDefault() should be triggered manually to stop event propagation instead of return false;.
  • Not all DOM events are provided by React. But you can still make use of them using React lifecycle methods.