事件系统

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号