合成事件(SyntheticEvent)

本参考指南记录了构成 React 事件系统的一部分，SyntheticEvent包装器。有关详细信息，请参阅处理事件指南。

概述

您的事件处理程序将传递 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

注意：

从v0.14起，从事件处理程序返回 false 将不再停止事件冒泡。应该根据需要手动 e.stopPropagation() 或 e.preventDefault() 。

事件池

SyntheticEvent 对象是通过合并得到的。这意味着在事件回调被调用后，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);

  // 不能工作。 this.state.click 事件只包含空值。
  this.setState({clickEvent: event});

  // 您仍然可以导出事件属性。
  this.setState({eventType: event.type});
}

注意：

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

被支持的事件

React将事件规范化，以便它们在不同的浏览器中具有一致的属性。

下面的事件处理程序由冒泡阶段中的事件触发。要为捕获阶段注册事件处理程序，请将 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

参考

剪贴板事件(Clipboard Events)

事件名称：

onCopy onCut onPaste

属性：

DOMDataTransfer clipboardData

合成事件(Composition Events)

事件名称：

onCompositionEnd onCompositionStart onCompositionUpdate

属性：

string data

键盘事件(Keyboard Events)

事件名称：

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

key 属性可以采用DOM Level 3 Events spec 中记录的任何值。

焦点事件(Focus Events)

事件名称：

onFocus onBlur

这些焦点事件工作在 React DOM 中所有的元素上，不仅是表单元素。

属性：

DOMEventTarget relatedTarget

表单事件(Form Events)

事件名称：

onChange onInput onSubmit

有关onChange事件的更多信息，请参阅表单(Forms)。

鼠标事件(Mouse Events)

事件名称：

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

onMouseEnter 和 onMouseLeave 事件从离开的元素传播到正在进入的元素，而不是普通的冒泡，并且没有捕获阶段。

属性：

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

指针时间（Pointer Events）

愚人码头注：它主要目的是用来将鼠标（Mouse）、触摸（touch)和触控笔（pen）三种事件整合为统一的API

事件名称：

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

onPointerEnter 和 onPointerLeave 事件从传播剩下的元素到正在输入的元素，而不是普通的冒泡，并且没有捕获阶段。

The onPointerEnter and onPointerLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.

属性：

如W3规范中所定义，指针事件使用以下属性扩展鼠标事件：

number pointerId
number width
number height
number pressure
number tiltX
number tiltY
string pointerType
boolean isPrimary

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

不是每个浏览器都支持指针事件（在撰写本文时，支持的浏览器包括：Chrome，Firefox，Edge 和 Internet Explorer）。React 不会对其他浏览器进行 polyfill 支持因为符合标准的 polyfill 会显着增加 react-dom 的包大小。

如果您的应用程序需要指针事件，我们建议添加第三方指针事件polyfill。

选择事件(Selection Events)

事件名称：

onSelect

触摸事件(Touch Events)

事件名称：

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性：

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

UI事件(UI Events)

事件名称：

onScroll

属性：

number detail
DOMAbstractView view

滚轮事件(Wheel Events)

事件名称：

onWheel

属性：

number deltaMode
number deltaX
number deltaY
number deltaZ

媒体事件(Media Events)

事件名称：

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)

事件名称：

onLoad onError

动画事件(Animation Events)

事件名称：

onAnimationStart onAnimationEnd onAnimationIteration

属性：

string animationName
string pseudoElement
float elapsedTime

转换事件(Transition Events)

事件名称：

onTransitionEnd

属性：

string propertyName
string pseudoElement
float elapsedTime

其他事件(Other Events)

事件名称：

onToggle

Edit this page