SyntheticEvent
Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | boolean bubblesboolean cancelableDOMEventTarget currentTargetboolean defaultPreventednumber eventPhaseboolean isTrustedDOMEvent nativeEventvoid preventDefault()boolean isDefaultPrevented()void stopPropagation()boolean isPropagationStopped()DOMEventTarget targetnumber timeStampstring type |
As of v0.14, returning
falsefrom an event handler will no longer stop event propagation. Instead,e.stopPropagation()ore.preventDefault()should be triggered manually, as appropriate.
Event pooling
The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.
1 2 3 4 5 6 7 8 9 10 11 12 13 | function onClick(event) { console.log(event); // => nullified object. console.log(event.type); // => "click" var eventType = event.type; // => "click" setTimeout(function() { console.log(event.type); // => null console.log(eventType); // => "click" }, 0); this.setState({clickEvent: event}); // Won't work. this.state.clickEvent will only contain null values. this.setState({eventType: event.type}); // You can still export event properties.} |
If you want to access the event properties in an asynchronous way, you should call
event.persist()on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
Supported Events
React normalizes events so that they have consistent properties across different browsers.
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.
Clipboard Events
Event names:
1 | onCopy onCut onPaste |
Properties:
1 | DOMDataTransfer clipboardData |
Composition Events
Event names:
1 | onCompositionEnd onCompositionStart onCompositionUpdate |
Properties:
1 | string data |
Keyboard Events
Event names:
1 | onKeyDown onKeyPress onKeyUp |
Properties:
1 2 3 4 5 6 7 8 9 10 11 12 | boolean altKeynumber charCodeboolean ctrlKeyboolean getModifierState(key)string keynumber keyCodestring localenumber locationboolean metaKeyboolean repeatboolean shiftKeynumber which |
Focus Events
Event names:
1 | onFocus onBlur |
Properties:
1 | DOMEventTarget relatedTarget |
These focus events work on all elements in the React DOM, not just form elements.
Form Events
Event names:
1 | onChange onInput onSubmit |
For more information about the onChange event, see Forms.
Mouse Events
Event names:
1 2 3 | onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp |
The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Properties:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | boolean altKeynumber buttonnumber buttonsnumber clientXnumber clientYboolean ctrlKeyboolean getModifierState(key)boolean metaKeynumber pageXnumber pageYDOMEventTarget relatedTargetnumber screenXnumber screenYboolean shiftKey |
Selection Events
Event names:
1 | onSelect |
Touch Events
Event names:
1 | onTouchCancel onTouchEnd onTouchMove onTouchStart |
Properties:
1 2 3 4 5 6 7 8 | boolean altKeyDOMTouchList changedTouchesboolean ctrlKeyboolean getModifierState(key)boolean metaKeyboolean shiftKeyDOMTouchList targetTouchesDOMTouchList touches |
UI Events
Event names:
1 | onScroll |
Properties:
1 2 | number detailDOMAbstractView view |
Wheel Events
Event names:
1 | onWheel |
Properties:
1 2 3 4 | number deltaModenumber deltaXnumber deltaYnumber deltaZ |
Media Events
Event names:
1 | onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting |
Image Events
Event names:
1 | onLoad onError |
Animation Events
Event names:
1 | onAnimationStart onAnimationEnd onAnimationIteration |
Properties:
1 2 3 | string animationNamestring pseudoElementfloat elapsedTime |
Transition Events
Event names:
1 | onTransitionEnd |
Properties:
1 2 3 | string propertyNamestring pseudoElementfloat elapsedTime |
Please login to continue.