react SyntheticEvent

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

SyntheticEvent

SynthecticEvent 入门参考文档包括React 时间系统中的表单部分。参考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});
}

Note：
如果你想要异步地访问事件属性，你应该调用事件的event.persist，这回从池子（pool）中移除合成事件（synthetic event）并且允许引用通过用户代码保存的事件。

Supported Events

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

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

Reference

Clipboard Events

事件名称：

1	onCopy onCute onPaste

属性：

1 2	DOMDataTransfer clipboardData `

Composition Events

事件名称：

1	onCompositionEnd onCompositionStart onCompositionUpdate

属性：

1 2	string data `

Keyboard Events

事件名称：

1	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
`

Focus Events

事件名称：

1	onFocus onBlur

这些focus event 工作在React DOM 上所有的element，不仅是form element
属性：

1 2	DOMEventTarget relatedTarget `

Form Events

事件名称：

1	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 事件传播是从离开的element 到进入的element而不是任意冒泡并且没有捕获阶段。
属性：

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

事件名称：

1	onTouchCancel onTouchEnd onTouchMove onTouchStart

属性：

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

UI Events

事件名称：

onScroll

属性：

1
2
3

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

事件名称：

1	onLoad onError

Animation Events

事件名称：

1	onAnimationStart onAnimationEnd onAnimationIteration

属性：

string animationName
string pseudoElement
float elapsedTime
`

Transition Events

事件名称：

1	onTransitionEnd

属性：

string propertyName
string pseudoElement
float elapsedTime
`

参考文档

SyntheticEvent