• 合成事件
    • 概览
      • 事件池
    • 支持的事件
    • 参考
      • 剪贴板事件
      • 复合事件
      • 键盘事件
      • 焦点事件
      • 表单事件
      • Mouse Events
      • 指针事件
      • 选择事件
      • 触摸事件
      • UI 事件
      • 滚轮事件
      • 媒体事件
      • 图像事件
      • 动画事件
      • 过渡事件
      • 其他事件

    合成事件

    此参考指南记录了构成 React 事件系统一部分的 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

    注意：

    截止 v0.14，当事件处理函数返回 false 时，不再阻止事件冒泡。你可以选择使用 e.stopPropagation() 或者 e.preventDefault() 替代。

    事件池

    SyntheticEvent 是合并而来。这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。

    1. function onClick(event) {
    2.   console.log(event); // => nullified object.
    3.   console.log(event.type); // => "click"
    4.   const eventType = event.type; // => "click"
    6.   setTimeout(function() {
    7.     console.log(event.type); // => null
    8.     console.log(eventType); // => "click"
    9.   }, 0);
    11.   // 不起作用，this.state.clickEvent 的值将会只包含 null
    12.   this.setState({clickEvent: event});
    14.   // 你仍然可以导出事件属性
    15.   this.setState({eventType: event.type});
    16. }

    注意：

    如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

    支持的事件

    React 通过将事件 normalize 以让他们在不同浏览器中拥有一致的属性。

    以下的事件处理函数在冒泡阶段被触发。如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture。例如，处理捕获阶段的点击事件请使用 onClickCapture，而不是 onClick。

    • Clipboard Events
    • Composition Events
    • Keyboard Events
    • Focus Events
    • Form Events
    • Mouse Events
    • Pointer Events
    • Selection Events
    • Touch Events
    • UI Events
    • Wheel Events
    • Media Events
    • Image Events
    • Animation Events
    • Transition Events
    • Other Events

    参考

    剪贴板事件

    事件名：

    1. onCopy onCut onPaste

    属性：

    1. DOMDataTransfer clipboardData

    复合事件

    事件名:

    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

    key 属性可以是 DOM Level 3 Events spec 里记录的任意值。

    焦点事件

    事件名：

    1. onFocus onBlur

    这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素。

    属性：

    1. DOMEventTarget relatedTarget

    表单事件

    事件名：

    1. onChange onInput onInvalid onSubmit

    想了解 onChange 事件的更多信息，查看 Forms 。

    Mouse Events

    鼠标事件：

    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

    指针事件

    事件名:

    1. onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
    2. onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

    onPointerEnter 和 onPointerLeave 事件从离开的元素向进入的元素传播，不是正常的冒泡，也没有捕获阶段。

    属性：

    如 W3 spec 中定义的，指针事件通过以下属性扩展了鼠标事件：

    1. number pointerId
    2. number width
    3. number height
    4. number pressure
    5. number tangentialPressure
    6. number tiltX
    7. number tiltY
    8. number twist
    9. string pointerType
    10. boolean isPrimary

    关于跨浏览器支持的说明：

    并非每个浏览器都支持指针事件（在写这篇文章时，已支持的浏览器有：Chrome，Firefox，Edge 和 Internet Explorer）。React 故意不通过 polyfill 的方式适配其他浏览器，主要是符合标准的 polyfill 会显著增加 react-dom 的 bundle 大小。

    如果你的应用要求指针事件，我们推荐添加第三方的指针事件 polyfil 。

    选择事件

    事件名：

    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

    UI 事件

    事件名：

    1. onScroll

    属性：

    1. number detail
    2. DOMAbstractView view

    滚轮事件

    事件名：

    1. onWheel

    属性：

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

    媒体事件

    事件名：

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

    图像事件

    事件名：

    1. onLoad onError

    动画事件

    事件名：

    1. onAnimationStart onAnimationEnd onAnimationIteration

    属性：

    1. string animationName
    2. string pseudoElement
    3. float elapsedTime

    过渡事件

    事件名：

    1. onTransitionEnd

    属性：

    1. string propertyName
    2. string pseudoElement
    3. float elapsedTime

    其他事件

    事件名：

    1. onToggle