react 事件系统

合成事件

事件处理程序通过 合成事件（SyntheticEvent）的实例传递，SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有stopPropagation()、preventDefault() 接口，而且这些接口夸浏览器兼容。

如果出于某些原因想使用浏览器原生事件，可以使用 nativeEvent 属性获取。每个和成事件（SyntheticEvent）对象都有以下属性：

boolean bubblesboolean cancelableDOMEventTarget currentTargetboolean defaultPreventedNumber eventPhaseboolean isTrustedDOMEvent nativeEventvoid preventDefault()void stopPropagation()DOMEventTarget targetDate timeStampString type

注意：

React v0.12 中，事件处理程序返回 false 不再停止事件传播，取而代之，应该根据需要手动触发 e.stopPropagation() 或 e.preventDefault()。

支持的事件

React 将事件统一化，使事件在不同浏览器上有一致的属性。

下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序，应该使用Capture 事件，例如使用 onClickCapture 处理点击事件的捕获阶段，而不是 onClick。

剪贴板事件

事件名称：

onCopy onCut onPaste

属性：

DOMDataTransfer clipboardData

键盘事件

事件名称：

onKeyDown onKeyPress onKeyUp

属性：

boolean altKeyNumber charCodeboolean ctrlKeyfunction getModifierState(key)String keyNumber keyCodeString localeNumber locationboolean metaKeyboolean repeatboolean shiftKeyNumber which

焦点事件

事件名称

onFocus onBlur

属性：

DOMEventTarget relatedTarget

表单事件

事件名称：

onChange onInput onSubmit

关于 onChange 事件的更多信息，参见 表单组件。

鼠标事件

事件名称：

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp

属性：

boolean altKeyNumber buttonNumber buttonsNumber clientXNumber clientYboolean ctrlKeyfunction getModifierState(key)boolean metaKeyNumber pageXNumber pageYDOMEventTarget relatedTargetNumber screenXNumber screenYboolean shiftKey

触控事件

在渲染任意组件之前调用 React.initializeTouchEvents(true)，以启用触控事件。

事件名称：

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性：

boolean altKeyDOMTouchList changedTouchesboolean ctrlKeyfunction getModifierState(key)boolean metaKeyboolean shiftKeyDOMTouchList targetTouchesDOMTouchList touches

用户界面事件

事件名称：

onScroll

属性：

Number detailDOMAbstractView view

滚轮事件

事件名称：

onWheel

属性：

Number deltaModeNumber deltaXNumber deltaYNumber deltaZ