• 事件系统
    • 合成事件
    • 事件池
    • 支持的事件
      • 剪贴板事件
      • Composition 事件
      • 键盘事件
      • 焦点事件
      • 表单事件
      • 鼠标事件
      • Selection Events
      • 触控事件
      • 用户界面事件
      • 滚轮事件
      • Media Events
      • Image Events

    事件系统

    合成事件

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

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

    1. boolean bubbles
    2. boolean cancelable
    3. DOMEventTarget currentTarget
    4. boolean defaultPrevented
    5. number eventPhase
    6. boolean isTrusted
    7. DOMEvent nativeEvent
    8. void preventDefault()
    9. boolean isDefaultPrevented()
    10. void stopPropagation()
    11. boolean isPropagationStopped()
    12. DOMEventTarget target
    13. number timeStamp
    14. string type

    注意：

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

    事件池

    SyntheticEvent 是池化的. 这意味着 SyntheticEvent 对象将会被重用并且所有的属性都会在事件回调被调用后被 nullified.
    这是因为性能的原因.
    因此,你不能异步的访问事件.

    1. function onClick(event) {
    2.   console.log(event); // => nullified object.
    3.   console.log(event.type); // => "click"
    4.   var eventType = event.type; // => "click"
    6.   setTimeout(function() {
    7.     console.log(event.type); // => null
    8.     console.log(eventType); // => "click"
    9.   }, 0);
    11.   this.setState({clickEvent: event}); // Won't work. this.state.clickEvent will only contain null values.
    12.   this.setState({eventType: event.type}); // You can still export event properties.
    13. }

    注意:

    如果你想异步访问事件属性,你应该在事件上调用 event.persist() ,这会从池中移除合成事件并允许对事件的引用被用会保留.

    支持的事件

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

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

    剪贴板事件

    事件名称：

    1. onCopy onCut onPaste

    属性：

    1. DOMDataTransfer clipboardData

    Composition 事件

    事件名称:

    1. onCompositionEnd onCompositionStart onCompositionUpdate

    属性:

    1. string data

    键盘事件

    事件名称：

    1. onKeyDown onKeyPress onKeyUp

    属性:

    1. boolean altKey
    2. number charCode
    3. boolean ctrlKey
    4. boolean getModifierState(key)
    5. string key
    6. number keyCode
    7. string locale
    8. number location
    9. boolean metaKey
    10. boolean repeat
    11. boolean shiftKey
    12. number which

    焦点事件

    事件名称

    1. onFocus onBlur

    属性：

    1. DOMEventTarget relatedTarget

    焦点事件在所有的React DOM上工作,不仅仅是表单元素.

    表单事件

    事件名称：

    1. onChange onInput onSubmit

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

    鼠标事件

    事件名称：

    1. onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
    2. onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
    3. onMouseMove onMouseOut onMouseOver onMouseUp

    onMouseEnter 和 onMouseLeave 事件从离开的元素传播到进入的元素,代替冒泡排序并且没有捕获阶段.

    属性：

    1. boolean altKey
    2. number button
    3. number buttons
    4. number clientX
    5. number clientY
    6. boolean ctrlKey
    7. boolean getModifierState(key)
    8. boolean metaKey
    9. number pageX
    10. number pageY
    11. DOMEventTarget relatedTarget
    12. number screenX
    13. number screenY
    14. boolean shiftKey

    Selection Events

    事件名称:

    1. onSelect

    触控事件

    事件名称：

    1. onTouchCancel onTouchEnd onTouchMove onTouchStart

    属性：

    1. boolean altKey
    2. DOMTouchList changedTouches
    3. boolean ctrlKey
    4. boolean getModifierState(key)
    5. boolean metaKey
    6. boolean shiftKey
    7. DOMTouchList targetTouches
    8. DOMTouchList touches

    用户界面事件

    事件名称：

    1. onScroll

    属性：

    1. number detail
    2. DOMAbstractView view

    滚轮事件

    事件名称：

    1. onWheel

    属性：

    1. number deltaMode
    2. number deltaX
    3. number deltaY
    4. number deltaZ

    Media Events

    事件名称:

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

    Image Events

    事件名称:

    1. onLoad onError