本參考指南記錄了SyntheticEvent構成React事件系統一部分的包裝器。請參閱處理事件指南了解更多信息。
1. 概觀
您的事件處理程序將被傳遞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()應該手動觸發。
1.1. 事件池
將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()該事件，該事件將從池中移除合成事件，並允許用戶代碼保留對事件的引用。
2. 支持的事件
React使事件標准化，以便它們在不同瀏覽器中具有一致的屬性。
下面的事件處理程序由冒泡階段的事件觸發。要為捕獲階段注冊事件處理程序，請附加Capture到事件名稱; 例如，而不是使用onClick，您將使用onClickCapture處理捕獲階段中的點擊事件。
3. 參考
3.1. 剪貼板事件
活動名稱：
onCopy onCut onPaste
屬性：
DOMDataTransfer clipboardData
3.2. 作曲活動
活動名稱：
onCompositionEnd onCompositionStart onCompositionUpdate
屬性：
string data
3.3. 鍵盤事件
活動名稱：
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規范中記錄的任何值。
3.4. 焦點事件
活動名稱：
onFocus onBlur
這些關注事件適用於React DOM中的所有元素，而不僅僅是表單元素。
屬性：
DOMEventTarget relatedTarget
3.5. 表格事件
活動名稱：
onChange onInput onInvalid onSubmit
有關onChange事件的更多信息，請參見表單。
3.6. 鼠標事件
活動名稱：
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
3.7. 選擇事件
活動名稱：
onSelect
3.8. 觸摸事件
活動名稱：
onTouchCancel onTouchEnd onTouchMove onTouchStart
屬性：
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches
3.9. UI事件
活動名稱：
onScroll
屬性：
number detail
DOMAbstractView view
3.10. 車輪事件
活動名稱：
onWheel
屬性：
number deltaMode
number deltaX
number deltaY
number deltaZ
3.11. 媒體活動
活動名稱：
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
3.12. 圖像事件
活動名稱：
onLoad onError
3.13. 動畫事件
活動名稱：
onAnimationStart onAnimationEnd onAnimationIteration
屬性：
string animationName
string pseudoElement
float elapsedTime
3.14. 過渡事件
活動名稱：
onTransitionEnd
屬性：
string propertyName
string pseudoElement
float elapsedTime
3.15. 其他事件
活動名稱：
onToggle