React事件系统

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

原生事件

document.querySelector('xxx').addEventListener('click', () => {
    console.log(event);
})
// 输出1：windowEvent ====>  chorme
// 输出2:   undefined  ====>  Firefox

可以看出event参数不加的话，有的浏览器会兼容，像火狐就不兼容，因此需要在事件handler中写

document.querySelector('xxx').addEventListener('click', event => {
    event = event || window.event;
    event.stopPropagation();
    event.preventDefault();
})

如果不写event而是在函数中传了某种参数，如果是chorme还好，会给你补充一个window.event，某些不支持的浏览器就会把你的参数当event了，当然会报错了;

React的事件

0.12版本之前可以使用在event handler（onclick = xxx.bind(this)）函数中使用return false来代替stopPropagation 和 preventDefault, 目前已经被移除，请不要使用。
使用 合成事件（SyntheticEvent）（类似jquery的$event）是对各种浏览器兼容的event相关封装，目前支持以下属性
- boolean bubbles
- boolean cancelable
- DOMEventTarget currentTarget
- boolean defaultPrevented
- Number eventPhase
- boolean isTrusted
- DOMEvent nativeEvent
- void preventDefault()
- void stopPropagation()
- DOMEventTarget target
- Date timeStamp
- String type
默认所有事件都在冒泡阶段被触发，如果想使用事件捕获有两种方法
1. 使用原生addEventListener('click', handler, true)第三个参数给true
2. 使用onClickCapture = xxx.bind(this);
传统开发方式在元素较多时建议使用事件委托 / 事件代理方式在父级进行代理事件，但React独特的事件处理系统会先把所有事件处理函数都收集到父级，再根据组件进行派发，因此无需特意写事件代理函数，即使一个列表有一万个组件元构成，onClick函数也可以写在组件元中。
事件池
event在React是一个虚拟对象，在事件被收集后到父级元素中时，虚拟对象会被合并，在该事件处理的回调后属性就没用了，如果用setState这种异步方法调用的话就没有用了。

function onClick(event) {
  console.log(event); // =>无效的对象
  console.log(event.type); // => "click"
  var eventType = event.type; // => "click"

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

  this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 将只包含空值.
  this.setState({eventType: event.type}); // 您依然可以导出事件属性
}