React基于虚拟DOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例，它完全符合 W3C 标准，不会存在任何IE标准的兼容问题。并且与原生浏览器具有一样的接口，同样支持事件冒泡机制，可用 stopPropagation() 和 preventDefault() 来中断它。
所有事件都自动绑定在最外层上。如果需要访问原生事件对象，可以使用nativeEvent属性。
1、绑定方式
React事件的绑定方式在写法上与原生HTML事件监听很相似。
<button onClick={this.handleClick}></button>
但有以下区别：
（1）JSX中采用驼峰式属性命名方式，HTML事件则是全部小写：onclick
（2）JSX中props的值可以是任意类型，但 HTML 中只能是字符串：onclick="handleClick()"
（3）React事件没有直接绑定在 HTML 元素上！只是借鉴了这种写法。React中所有事件使用了事件委托方式自动绑定在最外层的。
2、实现机制
1、事件委派
React并不会把事件处理函数直接绑定到真实的节点上，而是使用一个统一的事件监听器 ReactEventListener ，把所有事件绑定到结构的最外层 document 节点上，依赖冒泡机制完成了事件委派。
ReactEventListener：维持了一个映射来保存所有组件内部的事件监听和处理函数，负责事件注册和事件分发。当组件在挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。这样简化了事件处理和回收机制，提升了效率。
- 事件注册包括两方面：（1）将时间事件注册到 document 这个原生DOM上（2）将注册的事件采用事务队列的当时存储起来，以便事件触发时回调。
- 事件分发：通过 ReactEventListener.dispatchEvent 回调函数实现。当事件触发时，document上 addEventListener 注册的 callback 会被回调，回调函数就是 ReactEventListener.dispatchEvent ，dispatchEvent会找到事件触发的 DOM 及其对应的 React 组件。
ReactEventEmitter：负责每个组件上事件的执行。事件的执行采用冒泡机制，从触发事件的对象开始，向父元素回溯，依次调用它们注册的事件callback。
2、事件绑定的三种方式
- 组件上绑定
<Component 事件={this.方法.bind(this)}></Component>
缺点：每次点击时都需要重新绑定一个函数，所以这种方式对性能有一定影响（因为函数的创建和销毁都是需要开销的）。
- 构造方法中绑定
constructor(props){
super(props) ;
this.方法 = this.方法.bind(this,'event','args') ;
// event(事件名) 和 args(参数) 不是必须的。
}
<Component 事件={this.方法}></Component>
优点：只需要在组件初始化时绑定一次即可。
- 使用箭头函数
<Component 事件={(e) => this.方法(e,args)}</Component>
//其中 args (参数)不是必须的
缺点：由于箭头函数绑定是定义在 redner 方法中的，故组件每一次渲染都会创建一个新的箭头函数。同第一种方式，对性能有影响。
3、在React中使用原生事件
有时候React合成事件并不能满足我们的需求，我们不得不使用原生事件。原生事件就是我们在组件挂载后，在 componentDidMount 或 componentDidUpdate 方法中通过 ddEventListener 绑定的事件。
原生事件的传播方式有两种：事件冒泡和事件捕获。事件冒泡是从内层元素向外层元素触发，事件捕获是从外层元素向内层元素触发。具体采用哪一种传播方式，可以通过方法 addEventListener 的第三个参数来指定。为 true 就是事件捕获，为 false 就是事件冒泡.
事件传播是可以阻止的：
- 禁止事件冒泡
W3C： e.topPropagation();
IE： window.event.cancelBubble = true;
- 禁止默认事件
W3C： e.preventDefault();
IE： window.event.returnValue = false;
注意：
- 合成事件解决了IE兼容性问题，使用stopPropagation()即可禁止事件冒泡。
- 阻止 React 合成事件冒泡，并不能阻止原生事件的冒泡，就算使用 stopPropagation 也无法阻止原生事件的冒泡。
- 取消原生事件的冒泡也会同时取消 React 事件，并且原生事件的冒泡在 React 事件的触发和冒泡之前。
对于原生事件，一定要手动移除，否则很可能出现内存泄漏的问题。一般在componentDidMount() 方法中注册原生事件，在 componentWillUnmount() 方法中移除事件。
一般来说，尽量不要混用合成事件和原生事件，只有在使用 React 合成事件无法解决问题的这一场景，才去使用原生事件。因为两种混用非常容易导致问题，例如这样一个功能：点击按钮显示图片，点击非图片区域时将其隐藏。代码如下：
constructor(){
this.handleClick = this.handleClick.biand(this);
this.handleClickImg = this.handleClickImg.biand(this);
this.state={
visible: false,
};
}
componentDidMount(){
// 点击页面隐藏图片
document.body.addEventListener('click', e=>{
this.setState({
visible: false,
});
});
}
componentWillUnmount(){
document.body.removeEventListener('click'); // 组件卸载时，手动移除原生事件
}
// 点击按钮显示图片
handleClick(){
this.setState({
visible: true,
});
}
handleClickImg(){
e.stopPropagation(); // 试图实现：点击图片时，不隐藏图片
}
render(){
return (
<div>
<button onClick={this.handleClick} >点击显示图片</button>
<div
className="image"
style={{display: this.state.visible ? 'block' : 'none'}}
onClick={this.handleClickImg}
>
<img src='' alt=''>
</div>
</div>
)
}
在上面这个例子中，预期结果是：点击图片区域，图片不会隐藏。然而实际效果是点击图片时依然会隐藏图片。这就是因为 React 合成事件的委托机制的原因：在合成事件内部仅仅对最外层容器进行了绑定，并且依赖事件冒泡机制完成了委派。也就是说，handleClickImg事件并没有直接绑定在div.image元素上，因此在此处使用 e.stopPropagation() 并没有用。
解决方法：
- 使用原生事件来阻止
document.querySelector('image').addEventListener('click', e=>{
e.stopPropagation();
});
componentWillUnmount(){
document.body.removeEventListener('click'); // 组件卸载时，手动移除原生事件
document.querySelector('image').removeEventListener('click');
}
<div
className="image"
style={{display: this.state.visible ? 'block' : 'none'}}
>
<img src='' alt=''>
</div>
- 通过e.target判断
componentDidMount(){
document.body.addEventListener('click', e=>{
if(e.target && e.target.matches('div.image')){
return;
}
this.setState({
visible: false,
});
});
}
