SyntheticEvent

本参考指南记录了构成 React 事件系统一部分的 SyntheticEvent 包装器。请参阅 Handling Events 文档导航了解更多。

概览

你的事件处理程序将传递 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.   // Won't work. this.state.clickEvent will only contain null values.
  12.   this.setState({clickEvent: event});
  14.   // You can still export event properties.
  15.   this.setState({eventType: event.type});
  16. }

注意： 如果要以异步方式访问事件属性，则应该在事件上调用 event.persist() ，该事件将从事件池中移除合成事件，并允许用户代码保留对事件的引用。

支持的事件

React 使得事件标准化，以便它们在不同的浏览器中具有一致的属性。

下面的事件处理程序由冒泡阶段的事件触发。要在捕获阶段注册事件处理程序，请将 Capture 附加到事件名称上；例如，你可以使用 onClickCature 来处理捕获阶段的点击事件，而不是使用 onClick。

API 文档参考

Clipboard Events

事件名称：

  1. onCopy onCut onPaste

属性：

  1. DOMDataTransfer clipboardData

Composition Events

事件名称：

  1. onCompositionEnd onCompositionStart onCompositionUpdate

属性：

  1. string data

Keyboard Events

事件名称：

  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 属性可以采用 DOM3 级事件规范 中记录的任何值。

Focus Events

事件名：

  1. onFocus onBlur

这些关注事件适用于 React DOM 中的所有元素，而不仅仅是表单元素。

属性：

  1. DOMEventTarget relatedTarget

Form Events

活动名称：

  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

Selection Events

事件名称：

  1. onSelect

Touch Events

事件名称：

  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 Events

事件名称：

  1. onScroll

属性：

  1. number detail
  2. DOMAbstractView view

Wheel Events

事件名称：

  1. onWheel

属性：

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

Media Events

事件名称：

  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

Image Events

事件名称：

  1. onLoad onError

Animation Events

事件名称：

  1. onAnimationStart onAnimationEnd onAnimationIteration

属性：

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

Transition Events

事件名称：

  1. onTransitionEnd

属性:

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

Other Events

  1. onToggle