事件系统
2019-08-14 14:29 更新
合成事件
事件处理程序通过 合成事件
(SyntheticEvent
)的实例传递,SyntheticEvent
是浏览器原生事件跨浏览器的封装。SyntheticEvent
和浏览器原生事件一样有 stopPropagation()
、preventDefault()
接口,而且这些接口夸浏览器兼容。
如果出于某些原因想使用浏览器原生事件,可以使用 nativeEvent
属性获取。每个和成事件(SyntheticEvent
)对象都有以下属性:
boolean bubblesboolean cancelable DOMEventTarget currentTargetboolean defaultPrevented Number eventPhaseboolean isTrusted DOMEvent nativeEventvoid 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 charCodeboolean ctrlKey function getModifierState(key)String key Number keyCode String locale Number locationboolean metaKeyboolean repeatboolean shiftKey Number which
焦点事件
事件名称
onFocus onBlur
属性:
DOMEventTarget relatedTarget
表单事件
事件名称:
onChange onInput onSubmit
关于 onChange
事件的更多信息,参见 表单组件 。
鼠标事件
事件名称:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp
属性:
boolean altKeyNumber buttonNumber buttonsNumber clientXNumber clientY boolean ctrlKeyfunction getModifierState(key)boolean metaKeyNumber pageXNumber pageYDOMEventTarget relatedTargetNumber screenXNumber screenYboolean shiftKey
触控事件
事件名称:
onTouchCancel onTouchEnd onTouchMove onTouchStart
属性:
boolean altKey DOMTouchList changedTouchesboolean ctrlKey function getModifierState(key)boolean metaKeyboolean shiftKey DOMTouchList targetTouches DOMTouchList touches
用户界面事件
事件名称:
onScroll
属性:
Number detail DOMAbstractView view
滚轮事件
事件名称:
onWheel
属性:
Number deltaModeNumber deltaXNumber deltaYNumber deltaZ
以上内容是否对您有帮助:
← 标签和属性支持
更多建议: