本參考指南記錄了SyntheticEvent構(gòu)成React事件系統(tǒng)一部分的包裝器。請參閱處理事件指南以了解更多信息。

概觀

您的事件處理程序?qū)⑼ㄟ^SyntheticEvent瀏覽器本機(jī)事件的跨瀏覽器包裝傳遞實(shí)例。它具有與瀏覽器的本地事件相同的界面，包括stopPropagation()和preventDefault()，除了這些事件在所有瀏覽器中都相同。

如果您發(fā)現(xiàn)由于某種原因需要基礎(chǔ)瀏覽器事件，只需使用該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()應(yīng)該適當(dāng)?shù)厥謩佑|發(fā)。

事件池

SyntheticEvent是匯集。這意味著該SyntheticEvent對象將被重用，并且在事件回調(diào)被調(diào)用之后，所有屬性將被取消。這是出于性能原因。因此，您不能以異步方式訪問該事件。

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});}

注：如果要以異步方式訪問事件屬性，則應(yīng)調(diào)用event.persist()該事件，該事件將從池中移除合成事件，并允許用戶代碼保留對事件的引用。

支持的事件

React使事件標(biāo)準(zhǔn)化，以便它們在不同瀏覽器中具有一致的屬性。

下面的事件處理程序由冒泡階段的事件觸發(fā)。要為捕獲階段注冊事件處理程序，請附加Capture到事件名稱; 例如，而不是使用onClick，您將用于onClickCapture處理捕獲階段中的點(diǎn)擊事件。

• 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規(guī)范中記錄的任何值。

焦點(diǎn)活動

活動名稱：

onFocus onBlur

這些關(guān)注事件適用于React DOM中的所有元素，而不僅僅是表單元素。

屬性：

DOMEventTarget relatedTarget

表單事件

活動名稱：

onChange onInput onInvalid onSubmit

有關(guān)onChange事件的更多信息，請參閱表單。

鼠標(biāo)事件

活動名稱：

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

在onMouseEnter與onMouseLeave從元件事件被傳播到左側(cè)被輸入，而不是普通的鼓泡之一，沒有捕捉階段。

屬性：

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