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
- 默认所有事件都在冒泡阶段被触发，如果想使用事件捕获有两种方法
- 使用原生addEventListener('click', handler, true)
第三个参数给true - 使用onClickCapture = xxx.bind(this);
- 使用原生addEventListener('click', handler, true)
- 传统开发方式在元素较多时建议使用
事件委托 / 事件代理方式在父级进行代理事件，但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}); // 您依然可以导出事件属性
}
如果您想以一个异步的方式来访问事件属性，您应该对事件调用event.persist()。这将从事件池中取出合成的事件，并允许该事件的引用，使用户的代码被保留。
