4.6 SyntheticEvent

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

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

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});
  }
  

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

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

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

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