Unetway

ReactJS - SyntheticEvent

В этом справочном руководстве представлена SyntheticEvent обертка, которая является частью системы событий React.

Overview

Обработчикам событий будут переданы экземпляры SyntheticEvent, кросс-браузерная оболочка вокруг собственного события браузера. Он имеет тот же интерфейс, что и родное событие браузера, включая stopPropagation() и preventDefault(), за исключением того, что события работают одинаково во всех браузерах.

Если вы обнаружите, что по какой-то причине вам нужно базовое событие браузера, просто используйте этот nativeEvent атрибут, чтобы получить его. Каждый SyntheticEvent объект имеет следующие атрибуты:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

Заметка:

Начиная с v0.14, возврат false из обработчика события больше не останавливает распространение события. Вместо этого, e.stopPropagation() или e.preventDefault() следует запускать вручную, если это необходимо.

Event Pooling (Объединение событий)

SyntheticEvent будет объедин ли. Это означает, что SyntheticEvent объект будет повторно использован, и все свойства будут аннулированы после вызова обратного вызова события. Это по соображениям производительности. Таким образом, вы не можете получить доступ к событию асинхронным способом.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

Заметка:

Если вы хотите получить доступ к свойствам событий асинхронным образом, вы должны вызвать event.persist() событие, которое удалит синтетическое событие из пула и позволит ссылаться на событие, которое будет сохранено кодом пользователя.

Поддерживаемые события

React нормализует события, чтобы они имели согласованные свойства в разных браузерах.

Обработчики событий, приведенные ниже, инициируются событием в фазе барботажа. Чтобы зарегистрировать обработчик событий для фазы захвата, добавьте Capture имя события; например, вместо использования onClick, вы должны использовать onClickCapture для обработки события click в фазе захвата.

  • События в буфере обмена
  • События композиции
  • События в клавиатуре
  • Фокусные события
  • События формы
  • События мыши
  • События выбора
  • Коснитесь событий
  • События пользовательского интерфейса
  • Колесные события
  • Медиа-события
  • События изображения
  • Анимационные мероприятия
  • Переходные события

Reference

Clipboard Events (События в буфере обмена)

Имена событий:

onCopy onCut onPaste

Свойства:

DOMDataTransfer clipboardData

Composition Events (События композиции)

Имена событий:

onCompositionEnd onCompositionStart onCompositionUpdate

Свойства:

string data

Keyboard Events (События в клавиатуре)

Имена событий:

onKeyDown onKeyPress onKeyUp

Свойства:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

key свойство может принимать любое из значений, зарегистрированных в DOM Level 3 Events спецификации.

Focus Events (Фокусные события)

Имена событий:

onFocus onBlur

Эти фокусные события работают на всех элементах React DOM, а не только на элементах формы.

Свойства:

DOMEventTarget relatedTarget

Form Events (События формы)

Имена событий:

onChange onInput onInvalid onSubmit

Mouse Events (События мыши)

Имена событий:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

События onMouseEnter и onMouseLeave события распространяются от элемента до того, который вводится вместо обычного барботажа и не имеют фазы захвата.

Свойства:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Selection Events (События выбора)

Имена событий:

onSelect

Touch Events (События касания)

Имена событий:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Свойства:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

UI Events (События пользовательского интерфейса)

Имена событий:

onScroll

Свойства:

number detail
DOMAbstractView view

Wheel Events (Колесные события)

Имена событий:

onWheel

Свойства:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events (Медиа события)

Имена событий:

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 (События изображения)

Имена событий:

onLoad onError

Animation Events (События анимации)

Имена событий:

onAnimationStart onAnimationEnd onAnimationIteration

Свойства:

string animationName
string pseudoElement
float elapsedTime

Transition Events (События перехода)

Имена событий:

onTransitionEnd

Свойства:

string propertyName
string pseudoElement
float elapsedTime

Другие события

Имена событий:

onToggle