React - 事件系统

事件系统

React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性

组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法，如：render、componentWillUpdate、componentDidMount等。用户自定义的方法可以起符合JS命名规范的方法就可以（最好使用驼峰命名），如：handleClick、handleChange、handleMouseover等。

事件绑定语法：onClick = {this.handleClick}

绑定事件处理函数

事件处理程序由冒泡阶段的事件触发。如果要在捕获阶段注册事件处理程序，需要将Capture 附加到事件名称，比如，可以通过 onClickCapture 用来处理捕获阶段 的 click 事件，而不是使用 onClick。

鼠标类

• onClick
• onContextMenu
• onDoubleClick
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp

拖拽事件：

• onDrop
• onDrag
• onDragEnd
• onDragEnter
• onDragExit
• onDragLeave
• onDragOver
• onDragStart

触摸

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

触摸只会在移动设备上产生

键盘

onKeyPress是onKeyDown和onKeyUp的组合

• onKeyDown

• onKeyPress

• onKeyUp

剪切类

• onCopy

• onCut

• onPaste

表单类

(会专门总结表单类事件，在此仅仅简单列出)

• onChange

• onInput

• onSubmit

onChange可以用在输入框、单选框、下拉列表里，每当内容发生变化时我们都能获得通知。onInput使用在文字输入。onSubmit是用在整个表单的输入提交，常用在禁止表单的默认操作。

焦点事件

• onFocus

• onBlur

UI元素类

• onScroll

滚动事件触发的时候会触发onScroll事件

滚动

• onWheel

鼠标滚轮触发的事件，监听滚动幅度，滚动方位

组成事件

• onCompositionEnd

• onCompositionStart

• onCompositionUpdate

图片类

• onLoad

• onError

事件池

SyntheticEvent 是在事件池中的，这意味着将重用 SynctheticEvent 对象，并且在调用事件回调后，所有的实行都将无效。这是处于性能考虑而实现的一种方式，所以，事件是不能以异步方式访问的。

function onClick(event) {
  console.log(event); // => 事件对象
  console.log(event.type); // => "click"

  setTimeout(function() {
    console.log(event.type); // => 事件对象
    console.log(eventType); // => null
  }, 0);

如果需要异步访问事件属性，应在事件上调用 event.persist()，这种操作将从事件池中删除 SyncthesicEvent，并允许用户代码保留对事件的引用。

function onClick(event) {
  event.persist();
  console.log(event); // => 事件对象
  console.log(event.type); // => "click"

  setTimeout(function() {
    console.log(event); // => 事件对象
    console.log(event.type); // => "click"
  }, 0);

事件对象

SyntheticEvent 是 React 在浏览器事件基础上做的一层包装器，基本上 SyntheticEvent 和浏览器的原生事件有相同的接口，也能够进行 stopPropagation() 和 preventDefault()，并且事件在所有浏览器中的工作方式相同。
如果因为一些因素，需要底层的浏览器事件对象，只要使用nativeEvent属性就可以获取到它了。

通用属性

• bubbles (boolean) 表示事件是否冒泡

• cancelable(boolean) 表示事件是否可以取消

• currentTarget(DOMEventTarget) 与Target类似，由于事件可以冒泡，所以两者表示的内容是不同的

• defaultPrevented(boolean) 表示事件是否禁止了默认行为

• eventPhase(number) 表示事件所处的阶段

• isTrusted(boolean) 表示事件是否可信。所谓的可信事件表示的是用户操作的事件，不可信事件就是通过JS代码来触发的事件。

• nativeEvent(DOMEvent)

• preventDefault() (void) 对应的defaultPrevented，表示的是禁止默认行为

• stopPropagaTion() (void) 对应的是bubbles，表示的是sh

• target(DOMEventTarget)

• timeStamp(number) 时间戳，也就是事件触发的事件

• type(string) 事件的类型

不同事件对象的特有属性

剪切事件

• clipboardData(DOMDataTransfer)表示拿到的数据

键盘事件

• altKey(boolean) 表示是否按下alt键

• charCode(Number) 表示的是按键的字符编码，可以通过编码来判断按下的是什么键

• ctrlKey(boolean) 表示是否按下ctrl键

• getModifierState(key) (function) 表示是否按下辅助按键（辅助按键就是雷士ctrl、shift等辅助按键）可以传入按键编码来判断是否按下

• key(string) 字符串，按下的键

• keyCode(Number) 表示那些不是字符编码的按键

• locale(String) 表示本地化得一些字符串

• location(number) 表示位置

• metaKey(boolean) 表示的是win系统下的win键，mac系统下对应的command键

• repeat(boolean) 表示按键是否重复

• shiftKey(boolean) 表示是否按下shift

• which(Number) 表示经过通用化得charCode和keyCode

焦点事件

• relatedTarget(DOMEventTarget) 相关焦点对象

鼠标事件

• altKey(boolean)

• button(Number)

• buttons(Number)

• clientX(Number) 原点为浏览器左上角

• clinetY(Number) 原点为浏览器左上角

• ctrlKey(boolean)

• getModifierState(key) (function)

• metaKey(boolean)

• pageX(Number) 原点为HTML页面的左上角

• pageY(Number) 原点为HTML页面的左上角

• relatedTarget(DOMEventTarget)

• screenX(Number) 原点为显示器的左上角

• screenY(Number) 原点为显示器的左上角

• shiftKey(boolean)

触摸事件

为了使触摸事件生效，在渲染所有组件之前调用 React.initializeTouchEvents(true)。

• altKey(boolean)

• ctrlKey(boolean)

• getModifierState(key)

• metaKey(boolean)

• shiftKey(boolean)

• changedTouches(DOMTouchList) 判断手势操作

• targetTouches(DOMTouchList) 判断手势操作

• touches(DOMTouchList) 判断手势操作

UI元素事件

• detail(Number) 滚动的距离

• view(DOMAbstractView) 界面，视窗

鼠标滚动

• deltaMode(Number) 可以理解为移动的单位

• deltaX(Number) X轴移动的相对距离固定值

• deltaY(Number) Y轴移动的相对距离固定值

• deltaZ(Number) Z轴移动的相对距离固定值

参考链接

React.js学习笔记之事件系统
React 合成事件
debounce节流函数
React文档