|
| 1 | +# Defining React Node Events |
| 2 | + |
| 3 | +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. |
| 4 | + |
| 5 | +<p data-height="265" data-theme-id="0" data-slug-hash="PedNxy" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p> |
| 6 | +<script async src="https://static.codepen.io/assets/embed/ei.js"></script> |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +React creates what it calls a [SyntheticEvent](https://reactjs.org/docs/events.html) 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. |
| 11 | + |
| 12 | +<p data-height="265" data-theme-id="dark" data-slug-hash="zjyqpb" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="zjyqpb" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/zjyqpb/">zjyqpb</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p> |
| 13 | +<script async src="https://static.codepen.io/assets/embed/ei.js"></script> |
| 14 | + |
| 15 | +The table below outlines the unique SyntheticEvent properties for each type/category of events. |
| 16 | + |
| 17 | +| Type/Category | Events | Properties | |
| 18 | +|:--------------|:-----------------|:-----------------| |
| 19 | +| Clipboard | onCopy, onCut, onPaste | DOMDataTransfer, clipboardData | |
| 20 | +| Composition | onCompositionEnd, onCompositionStart, onCompositionUpdate | data | |
| 21 | +| Keyboard | onKeyDown, onKeyPress, onKeyUp | altKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which | |
| 22 | +| Focus | onChange, onInput, onSubmit | DOMEventTarget, relatedTarget | |
| 23 | +| Form | onFocus, onBlur | | |
| 24 | +| 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 | |
| 25 | +| Selection | onSelect | | |
| 26 | +| Touch | onTouchCancel, onTouchEnd, onTouchMove, onTouchStart | altKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches | |
| 27 | +| UI | onScroll | detail, DOMAbstractView view | |
| 28 | +| Wheel | onWheel | deltaMode, deltaX, deltaY, deltaZ | |
| 29 | +| Media | onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting | | |
| 30 | +| Image | onLoad, onError | | |
| 31 | +| Animation | onAnimationStart, onAnimationEnd, onAnimationIteration | animationName, pseudoElement, elapsedTime | |
| 32 | +| Transition | onTransitionEnd | propertyName, pseudoElement, elapsedTime | |
0 commit comments