SyntheticEvent

SyntheticEvent

本参考指南记录了SyntheticEvent构成React事件系统一部分的包装器。请参阅处理事件指南以了解更多信息。

概观

您的事件处理程序将通过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 // Won't work. this.state.clickEvent will only contain null values. this.setState{clickEvent: event} // You can still export event properties. this.setState{eventType: event.type} }

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

支持的事件

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

下面的事件处理程序由冒泡阶段的事件触发。要为捕获阶段注册事件处理程序,请附加Capture到事件名称; 例如,而不是使用onClick,您将用于onClickCapture处理捕获阶段中的点击事件。

  • Clipboard Events

  • Composition Events

  • Keyboard Events

  • Focus Events

  • Form Events

  • Mouse Events

  • Selection Events

  • Touch Events

  • UI Events

  • Wheel Events

  • Media Events

  • Image Events

  • Animation Events

  • Transition Events

  • Other Events

参考

剪贴板事件

活动名称:

onCopy onCut onPaste

属性:

DOMDataTransfer clipboardData

合成活动

活动名称:

onCompositionEnd onCompositionStart onCompositionUpdate

属性:

string data

键盘事件

活动名称:

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规范中记录的任何值。

焦点活动

活动名称:

onFocus onBlur

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

属性:

DOMEventTarget relatedTarget

表单事件

活动名称:

onChange onInput onInvalid onSubmit

有关onChange事件的更多信息,请参阅表单。

鼠标事件

活动名称:

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

onMouseEnteronMouseLeave从元件事件被传播到左侧被输入,而不是普通的鼓泡之一,没有捕捉阶段。

属性:

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

选择事件

活动名称:

onSelect

触摸事件

活动名称:

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性:

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

UI事件

活动名称:

onScroll

属性:

number detail DOMAbstractView view

车轮事件

活动名称:

onWheel

属性:

number deltaMode number deltaX number deltaY number deltaZ

媒体活动

活动名称:

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

图像事件

活动名称:

onLoad onError

动画事件

活动名称:

onAnimationStart onAnimationEnd onAnimationIteration

属性:

string animationName string pseudoElement float elapsedTime

过渡事件

活动名称:

onTransitionEnd

属性:

string propertyName string pseudoElement float elapsedTime

其他活动

活动名称:

onToggle