Defining Events on Components

Events can be added to React nodes inside of a components render configuration option (discussed in Ch. 4 section 4.7 and Ch. 5 section 5.8).

In the code example, two React events (i.e., onClick & onMouseOver) are set on React nodes (via JSX) using what looks like component props.

source code

Basically, React when rendering a component looks for special React prop events (e.g., onClick) and treats these props differently from other props (all React events shown in table below). Obviously the difference being, that eventing in the real DOM is being wired up behind the scenes.

Part of this wiring is auto binding the context of the handler/callback to the scope of the component instance. In the code example below the value of this inside of the handlers/callbacks will reference the component instance itself.

source code

React supports the following events and event specific syntheticEvent properties:


















































































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 end of the event name (e.g., onClick would become onClickCapture).
  • If you need the browser event details for a given event you can access this by using the nativeEvent property found in the SyntheticEvent object passed into React event hander/callbacks.
  • React does not 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 returning false;.
  • Not all DOM events are provided by React. But you can still make use of them using React lifecycle methods.