SyntheticEvent

SyntheticEvent
- Overview
Event Pooling
Supported Events
参考

此文章是翻译SyntheticEvent这篇React（版本v16.2.0）官方文档。

入门参考记录React 事件系统中的表单部分的SynthecticEvent 包装器。参考Handling Event 获取更多信息。

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

Note： 截至v0.14 这个版本，事件处理器中返回false 不再阻止事件传递。相反，视情况而定手动的触发e.stopPropagation() 或者e.preventDefault() 方法。

Event Pooling

SyntheticEvent 是一个池子（pooled）。这意味着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()，这会从池子（pool）中移除合成事件（synthetic event）并且允许事件的引用通过用户代码保存。

Supported Events

React 标准化事件以至于它们有跨浏览器一致的属性。

下面的事件局部在冒泡阶段（in bubbling phase）被触发。在捕获阶段（the capture phase）注册一个事件句柄，追加Capture 到事件名称上：例如，替代使用onClick，你应该使用onClickCapture 在捕获阶段去处理事件。

参考

Clipboard Events

事件名称：

onCopy onCute 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级别3事件规范中记录的任何值。

Focus Events

事件名称：

onFocus onBlur

这些focus event 工作在React DOM 上所有的元素，不仅是表单元素（form element）

属性：

DOMEventTarget relatedTarget

Form Events

事件名称：

onChange onInput onSubmit

了解更多关于onChange event，参考Forms

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 onEncryted onEnded onError onLoadeData onLoadeMetadata 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

Other Events

事件名称：

onToggle