\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React and include live examples:
\n\n
This reference guide documents the SyntheticEvent wrapper that forms part of React’s Event System. See the Handling Events guide to learn more.
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. The synthetic events are different from, and do not map directly to, the browser’s native events. For example in onMouseLeave event.nativeEvent will point to a mouseout event. The specific mapping is not part of the public API and may change at any time. Every SyntheticEvent object has the following attributes:
boolean bubbles\nboolean cancelable\nDOMEventTarget currentTarget\nboolean defaultPrevented\nnumber eventPhase\nboolean isTrusted\nDOMEvent nativeEvent\nvoid preventDefault()\nboolean isDefaultPrevented()\nvoid stopPropagation()\nboolean isPropagationStopped()\nvoid persist()\nDOMEventTarget target\nnumber timeStamp\nstring type\n\nNote:
\nAs of v17,
\ne.persist()doesn’t do anything because theSyntheticEventis no longer pooled.
\n\nNote:
\nAs of v0.14, returning
\nfalsefrom an event handler will no longer stop event propagation. Instead,e.stopPropagation()ore.preventDefault()should be triggered manually, as appropriate.
React normalizes events so that they have consistent properties across different browsers.
\nThe 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.
Event names:
\nonCopy onCut onPasteProperties:
\nDOMDataTransfer clipboardDataEvent names:
\nonCompositionEnd onCompositionStart onCompositionUpdateProperties:
\nstring dataEvent names:
\nonKeyDown onKeyPress onKeyUpProperties:
\nboolean altKey\nnumber charCode\nboolean ctrlKey\nboolean getModifierState(key)\nstring key\nnumber keyCode\nstring locale\nnumber location\nboolean metaKey\nboolean repeat\nboolean shiftKey\nnumber whichThe key property can take any of the values documented in the DOM Level 3 Events spec.
Event names:
\nonFocus onBlurThese focus events work on all elements in the React DOM, not just form elements.
\nProperties:
\nDOMEventTarget relatedTargetThe onFocus event is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.
function Example() {\n return (\n <input\n onFocus={(e) => {\n console.log('Focused on input');\n }}\n placeholder=\"onFocus is triggered when you click this input.\"\n />\n )\n}The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.
function Example() {\n return (\n <input\n onBlur={(e) => {\n console.log('Triggered because this input lost focus');\n }}\n placeholder=\"onBlur is triggered when you click this input and then you click outside of it.\"\n />\n )\n}You can use the currentTarget and relatedTarget to differentiate if the focusing or blurring events originated from outside of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
function Example() {\n return (\n <div\n tabIndex={1}\n onFocus={(e) => {\n if (e.currentTarget === e.target) {\n console.log('focused self');\n } else {\n console.log('focused child', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Not triggered when swapping focus between children\n console.log('focus entered self');\n }\n }}\n onBlur={(e) => {\n if (e.currentTarget === e.target) {\n console.log('unfocused self');\n } else {\n console.log('unfocused child', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Not triggered when swapping focus between children\n console.log('focus left self');\n }\n }}\n >\n <input id=\"1\" />\n <input id=\"2\" />\n </div>\n );\n}Event names:
\nonChange onInput onInvalid onReset onSubmit For more information about the onChange event, see Forms.
\nEvent names:
\nonError onLoadEvent names:
\nonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit\nonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\nonMouseMove onMouseOut onMouseOver onMouseUpThe 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:
\nboolean altKey\nnumber button\nnumber buttons\nnumber clientX\nnumber clientY\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nnumber pageX\nnumber pageY\nDOMEventTarget relatedTarget\nnumber screenX\nnumber screenY\nboolean shiftKeyEvent names:
\nonPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture\nonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOutThe onPointerEnter and onPointerLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Properties:
\nAs defined in the W3 spec, pointer events extend Mouse Events with the following properties:
\nnumber pointerId\nnumber width\nnumber height\nnumber pressure\nnumber tangentialPressure\nnumber tiltX\nnumber tiltY\nnumber twist\nstring pointerType\nboolean isPrimaryA note on cross-browser support:
\nPointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of react-dom.
If your application requires pointer events, we recommend adding a third party pointer event polyfill.
\nEvent names:
\nonSelectEvent names:
\nonTouchCancel onTouchEnd onTouchMove onTouchStartProperties:
\nboolean altKey\nDOMTouchList changedTouches\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nboolean shiftKey\nDOMTouchList targetTouches\nDOMTouchList touchesEvent names:
\nonScroll\n\nNote
\nStarting with React 17, the
\nonScrollevent does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.
Properties:
\nnumber detail\nDOMAbstractView viewEvent names:
\nonWheelProperties:
\nnumber deltaMode\nnumber deltaX\nnumber deltaY\nnumber deltaZEvent names:
\nonAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted\nonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay\nonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend\nonTimeUpdate onVolumeChange onWaitingEvent names:
\nonLoad onErrorEvent names:
\nonAnimationStart onAnimationEnd onAnimationIterationProperties:
\nstring animationName\nstring pseudoElement\nfloat elapsedTimeEvent names:
\nonTransitionEndProperties:
\nstring propertyName\nstring pseudoElement\nfloat elapsedTimeEvent names:
\nonToggle