4.6 SyntheticEvent


Данное справочное руководство описывает оболочку SyntheticEvent, которая является частью системы событий React. Дополнительную информацию см. в руководстве «обработка событий».



4.6.1 Обзор


Вашим обработчикам событий будут переданы экземпляры 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().


4.5.4.2 Пул событий

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


Код
    
  function onClick(event) {
    console.log(event); // => обнуляемый объект.
    console.log(event.type); // => "click"
    const eventType = event.type; // => "click"

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

    // Не будет работать. this.state.clickEvent будет иметь null
    this.setState({clickEvent: event});

    // Но вы можете сохранить свойства события
    this.setState({eventType: event.type});
  }
  


Замечание.

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



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


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

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

  • События буфера обмена
  • События композиции
  • События клавиатуры
  • События фокуса
  • События формы
  • События мыши
  • События выбора
  • События касания
  • События UI
  • События колеса прокрутки
  • События медиа
  • События изображения
  • События анимации
  • События перехода
  • Другие события



4.5.6 Справка



4.6.3.1 События буфера обмена

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


Код
    
  onCopy onCut onPaste
  

Свойства:

code-example-3.tag
Код
    
  DOMDataTransfer clipboardData
  


4.6.3.2 События композиции

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


Код
    
  onCompositionEnd onCompositionStart onCompositionUpdate
  

Свойства:


Код
    
  string data
  


4.6.3.3 События клавиатуры

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


Код
    
  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 .


4.6.3.4 События фокуса

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


Код
    
  onFocus onBlur
  

Свойства:


Код
    
  DOMEventTarget relatedTarget
  


4.6.3.5 События формы

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


Код
    
  onChange onInput onSubmit onInvalid(>= v16)
  


4.6.3.6 События мыши

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


Код
    
  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
  


4.6.3.7 События выбора

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


Код
    
  onSelect
  


4.6.3.8 События касания

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


Код
    
  onTouchCancel onTouchEnd onTouchMove onTouchStart
  

Свойства:


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


4.6.3.9 События UI

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


Код
    
  onScroll
  

Свойства:


Код
    
  number detail
  DOMAbstractView view
  


4.6.3.10 События колеса прокрутки

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


Код
    
  onWheel
  

Свойства:


Код
    
  number deltaMode
  number deltaX
  number deltaY
  number deltaZ
  


4.6.3.11 События медиа

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


Код
    
  onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
  onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
  onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
  onTimeUpdate onVolumeChange onWaiting
  

Свойства:


Код
    
  number deltaMode
  number deltaX
  number deltaY
  number deltaZ
  


4.6.3.12 События изображения

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


Код
    
  onLoad onError
  


4.6.3.13 События анимации

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


Код
    
  onAnimationStart onAnimationEnd onAnimationIteration
  

Свойства:


Код
    
  string animationName
  string pseudoElement
  float elapsedTime
  


4.6.3.14 События перехода

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


Код
    
  onTransitionEnd
  

Свойства:


Код
    
  string propertyName
  string pseudoElement
  float elapsedTime
  


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

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


Код
    
  onToggle