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. The event handlers below are triggered by an event in the bubbling phase.

React normalizes events so that they have consistent properties across different browsers. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate. Every SyntheticEvent object has the following attributes:īoolean isDefaultPrevented ( ) void stopPropagation ( )īoolean isPropagationStopped ( ) void persist ( )Īs of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.Īs of v0.14, returning false from an event handler will no longer stop event propagation. The specific mapping is not part of the public API and may change at any time. For example in onMouseLeave event.nativeEvent will point to a mouseout event. The synthetic events are different from, and do not map directly to, the browser’s native events. If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. However, you can only create animated cursors in select standard sizes (16×16, 24×24, 32×32, etc.). Moreover, the software allows you to set the time for every frame to control the animated cursor. With multiple frames, creating an animated cursor becomes easy. See the Handling Events guide to learn more. You can add another frame to the series with a right-click on the frame. This reference guide documents the SyntheticEvent wrapper that forms part of React’s Event System. These new documentation pages teach modern React and include live examples:

Animated mouse cursor