В этом справочном руководстве описана обёртка SyntheticEvent, которая является частью системы событий React. Смотрите руководство Обработка событий для детальной информации.
Ваши обработчики событий получают экземпляр SyntheticEvent, это кроссбраузерная обёртка над нативным экземпляром события. У неё такой же интерфейс, как и у нативного события, включая методы stopPropagation() и preventDefault(). Эта обёртка помогает событиям работать одинаково во всех браузерах.
Если вам всё-таки нужно получить нативное браузерное событие, обратитесь к атрибуту nativeEvent. Синтетические события отличаются от нативных событий браузера и непосредственно не связаны с ними. Например, в синтетическом событии onMouseLeave атрибут event.nativeEvent будет указывать на mouseout. Эта деталь реализации не является частью публичного API, поэтому может измениться со временем. Вот перечень атрибутов объекта SyntheticEvent:
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\nПримечание:
\nНачиная с версии 0.14, возврат
\nfalseиз обработчика событий больше не останавливает всплытие. Вместо этого нужно вручную вызыватьe.stopPropagation()илиe.preventDefault().
События SyntheticEvent содержатся в пуле. Это означает, что объект SyntheticEvent будет повторно использован, а все его свойства будут очищены после вызова обработчика события.\nЭто необходимо из соображений производительности.\nИменно поэтому нельзя использовать синтетические события асинхронно.
function onClick(event) {\n console.log(event); // => null-объект.\n console.log(event.type); // => \"click\"\n const eventType = event.type; // => \"click\"\n\n setTimeout(function() {\n console.log(event.type); // => null\n console.log(eventType); // => \"click\"\n }, 0);\n\n // Не сработает, поскольку this.state.clickEvent будет содержать только null-значения.\n this.setState({clickEvent: event});\n\n // По-прежнему можно экспортировать свойства события.\n this.setState({eventType: event.type});\n}\n\nПримечание:
\nЕсли вы всё же хотите обратиться к полям события асинхронно, вам нужно вызвать
\nevent.persist()на событии. Тогда оно будет извлечено из пула, что позволит вашему коду удерживать ссылки на это событие.
React нормализует события так, чтобы они содержали одинаковые свойства во всех браузерах.
\nОбработчики ниже вызываются на фазе всплытия (bubbling). А чтобы зарегистрировать событие на фазе перехвата (capture), просто добавьте Capture к имени события; например, вместо использования onClick используйте onClickCapture, чтобы обработать событие на фазе перехвата.
Названия событий:
\nonCopy onCut onPasteСвойства:
\nDOMDataTransfer clipboardDataНазвания событий:
\nonCompositionEnd onCompositionStart onCompositionUpdateСвойства:
\nstring dataНазвания событий:
\nonKeyDown onKeyPress onKeyUpСвойства:
\nboolean altKey\nnumber charCode\nboolean ctrlKey\nboolean getModifierState(key)\nstring key\nnumber keyCode\nstring locale\nnumber location\nboolean metaKey\nboolean repeat\nboolean shiftKey\nnumber whichСвойство key может содержать любое из документированных значений в спецификации событий DOM третьего уровня.
Названия событий:
\nonFocus onBlurЭти события фокуса работают не только на элементах формы, но и на всех остальных элементах в React DOM.
\nСвойства:
\nDOMEventTarget relatedTargetНазвания событий:
\nonChange onInput onInvalid onReset onSubmitБольше информации о событии onChange тут — Формы.
\nНазвания событий:
\nonError onLoadНазвания событий:
\nonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit\nonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\nonMouseMove onMouseOut onMouseOver onMouseUpСобытия onMouseEnter и onMouseLeave всплывают с покинутого элемента к наведённому, вместо обычного процесса всплытия и не имеют фазы перехвата.
Свойства:
\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 shiftKeyНазвания событий:
\nonPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture\nonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOutСобытия onPointerEnter и onPointerLeave всплывают с покинутого элемента к наведённому, вместо обычного процесса всплытия и не имеют фазы перехвата.
Свойства:
\nПо определению из спецификации W3, события курсора наследуют события мыши со следующими свойствами:
\nnumber pointerId\nnumber width\nnumber height\nnumber pressure\nnumber tangentialPressure\nnumber tiltX\nnumber tiltY\nnumber twist\nstring pointerType\nboolean isPrimaryНа заметку по поводу кроссбраузерности:
\nСобытия указателя ещё не поддерживаются во всех браузерах (на момент написания этой страницы есть поддержка в Chrome, Firefox, Edge и Internet Explorer). React сознательно не добавляет полифил для поддержки в других браузерах, потому что это значительно бы увеличило размер пакета react-dom.
Если вашему приложению нужны события указателя, мы рекомендуем использовать сторонний полифил.
\nНазвания событий:
\nonSelectНазвания событий:
\nonTouchCancel onTouchEnd onTouchMove onTouchStartСвойства:
\nboolean altKey\nDOMTouchList changedTouches\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nboolean shiftKey\nDOMTouchList targetTouches\nDOMTouchList touchesНазвания событий:
\nonScrollСвойства:
\nnumber detail\nDOMAbstractView viewНазвания событий:
\nonWheelСвойства:
\nnumber deltaMode\nnumber deltaX\nnumber deltaY\nnumber deltaZНазвания событий:
\nonAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted\nonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay\nonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend\nonTimeUpdate onVolumeChange onWaitingНазвания событий:
\nonLoad onErrorНазвания событий:
\nonAnimationStart onAnimationEnd onAnimationIterationСвойства:
\nstring animationName\nstring pseudoElement\nfloat elapsedTimeНазвания событий:
\nonTransitionEndСвойства:
\nstring propertyName\nstring pseudoElement\nfloat elapsedTimeНазвания событий:
\nonToggle