Defining React Node Events
Events can be added to React nodes like events can be added to DOM nodes. In the example below I am adding a very simple click and mouseover event to a React <div> node.
See the Pen PedNxy by Bunlong (@Bunlong) on CodePen.
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.
See the Pen zjyqpb by Bunlong (@Bunlong) on CodePen.
The table below outlines the unique SyntheticEvent properties for each type/category of events.
| Type/Category | Events | 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 |