1. 鼠標事件
onClick
?- 點擊事件onContextMenu
?- 右鍵菜單事件onDoubleClick
?- 雙擊事件onDrag
?- 拖拽事件onDragEnd
?- 拖拽結束事件onDragEnter
?- 拖拽進入目標區域事件onDragExit
?- 拖拽離開目標區域事件onDragLeave
?- 拖拽離開事件onDragOver
?- 拖拽懸停事件onDragStart
?- 拖拽開始事件onDrop
?- 拖拽釋放事件onMouseDown
?- 鼠標按下事件onMouseEnter
?- 鼠標進入事件onMouseLeave
?- 鼠標離開事件onMouseMove
?- 鼠標移動事件onMouseOut
?- 鼠標移出事件onMouseOver
?- 鼠標懸停事件onMouseUp
?- 鼠標釋放事件
2. 鍵盤事件
onKeyDown
?- 按鍵按下事件onKeyPress
?- 按鍵按壓事件(已廢棄)onKeyUp
?- 按鍵釋放事件
3. 表單事件
onChange
?- 表單值變化事件onInput
?- 輸入事件onInvalid
?- 表單驗證失敗事件onReset
?- 表單重置事件onSubmit
?- 表單提交事件
4. 焦點事件
onFocus
?- 獲取焦點事件onBlur
?- 失去焦點事件
5. 觸摸事件
onTouchCancel
?- 觸摸取消事件onTouchEnd
?- 觸摸結束事件onTouchMove
?- 觸摸移動事件onTouchStart
?- 觸摸開始事件
6. UI 事件
onScroll
?- 滾動事件
7. 圖像事件
onLoad
?- 加載完成事件onError
?- 加載錯誤事件
8. 動畫事件
onAnimationStart
?- 動畫開始事件onAnimationEnd
?- 動畫結束事件onAnimationIteration
?- 動畫迭代事件
9. 過渡事件
onTransitionEnd
?- 過渡結束事件
10. 剪貼板事件
onCopy
?- 復制事件onCut
?- 剪切事件onPaste
?- 粘貼事件
11. 媒體事件
onAbort
?- 媒體加載中斷事件onCanPlay
?- 媒體可以播放事件onCanPlayThrough
?- 媒體可以完整播放事件onDurationChange
?- 媒體時長變化事件onEmptied
?- 媒體資源清空事件onEncrypted
?- 媒體加密事件onEnded
?- 媒體播放結束事件onLoadedData
?- 媒體數據加載完成事件onLoadedMetadata
?- 媒體元數據加載完成事件onLoadStart
?- 媒體開始加載事件onPause
?- 媒體暫停事件onPlay
?- 媒體播放事件onPlaying
?- 媒體正在播放事件onProgress
?- 媒體加載進度事件onRateChange
?- 媒體播放速率變化事件onSeeked
?- 媒體跳轉完成事件onSeeking
?- 媒體跳轉開始事件onStalled
?- 媒體加載停滯事件onSuspend
?- 媒體加載暫停事件onTimeUpdate
?- 媒體時間更新事件onVolumeChange
?- 媒體音量變化事件onWaiting
?- 媒體等待事件
12. 其他事件
onToggle
?-?<details>
?元素的展開/折疊事件
注意事項
- 事件命名:React 的事件名采用駝峰命名法(如?
onClick
?),而不是原生的小寫形式(如?onclick
?)。 - 事件池:React 的合成事件會被池化以提高性能,因此事件對象會在回調執行后被清空。如果需要異步訪問事件屬性,需調用?
event.persist()
?。在React 17+中,已不需要event.persist(),因為已優化了事件池
- 兼容性:合成事件的行為與原生事件一致,但屏蔽了瀏覽器差異。