React学习之高级事件系统（二十七）

上一篇博客讲了如何在React使用HTML属性，这次就是函数，但是此篇博客讲述的事件不完备，其他的希望大家自行学习

概念：合成事件（SyntheticEvent）是React事件系统的核心

1.概要

事件处理程序通过合成事件的实例进行传递，合成事件是浏览器原生事件跨浏览器的封装，SyntheticEvent和浏览器的原生事件一样有stopPropagation，preventDefault()接口，同时这些接口也是跨浏览器的。

如果你因为某些原因想使用浏览器原生的时间，可以使用nativeEvent属性获取，每一个合成事件对象都有以下属性：

类型    属性名   
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

注意：

在React v0.14总，事件处理程序返回false不再停止事件传播，取而代之，应该需要手动触发e.stopPropagation()或者e.preventDefault()

2.事件池[Event]

SyntheticEvent 是被池化(池化的概念大家可以百度)的，这意味着SyntheticEvent对象其实是被抽象出来的，它将会被重用并且所有的属性都会在事件回调被调用后被取消掉或者说被释放掉，同时这个对象只会存在一个实例，因此，你不能异步的访问事件，也就是说自始至终你都只有一个对象来使用，何来异步说法。

function onClick(event) {
  console.log(event); // => 事件对象[之后会被取消掉或者说无效化]
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  },