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(),因为已优化了事件池
- 兼容性:合成事件的行为与原生事件一致,但屏蔽了浏览器差异。