集册 React 中文版 事件系统

事件系统

欢马劈雪     最近更新时间:2020-08-04 05:37:59

492

合成事件

事件处理程序通过 合成事件SyntheticEvent)的实例传递,SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有 stopPropagation()preventDefault() 接口,而且这些接口夸浏览器兼容。

如果出于某些原因想使用浏览器原生事件,可以使用 nativeEvent 属性获取。每个和成事件(SyntheticEvent)对象都有以下属性:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
Number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
void stopPropagation()
DOMEventTarget target
Date timeStamp
String type

注意:

React v0.12 中,事件处理程序返回 false 不再停止事件传播,取而代之,应该根据需要手动触发 e.stopPropagation()e.preventDefault()

支持的事件

React 将事件统一化,使事件在不同浏览器上有一致的属性。

下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序,应该使用 Capture 事件,例如使用 onClickCapture 处理点击事件的捕获阶段,而不是 onClick

剪贴板事件

事件名称:

onCopy onCut onPaste

属性:

DOMDataTransfer clipboardData

键盘事件

事件名称:

onKeyDown onKeyPress onKeyUp

属性:

boolean altKey
Number charCode
boolean ctrlKey
function getModifierState(key)
String key
Number keyCode
String locale
Number location
boolean metaKey
boolean repeat
boolean shiftKey
Number which

焦点事件

事件名称

onFocus onBlur

属性:

DOMEventTarget relatedTarget

表单事件

事件名称:

onChange onInput onSubmit

关于 onChange 事件的更多信息,参见 表单组件 。

鼠标事件

事件名称:

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

属性:

boolean altKey
Number button
Number buttons
Number clientX
Number clientY
boolean ctrlKey
function getModifierState(key)
boolean metaKey
Number pageX
Number pageY
DOMEventTarget relatedTarget
Number screenX
Number screenY
boolean shiftKey

触控事件

事件名称:

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性:

展开阅读全文