0.前言

在互联网上高质量的有关 React 合成事件的文章大都从源码的角度出发，文章主要深入分析 16.X 版本的源码。但是 v17 版本以后源码结构存在较大范围的改变。导致原先解决合成事件中的冒泡解决方案，如event.persist() 以及 event.nativeEvent.stopImmediatePropagation 等均已失效。

因此本篇博客不打算从源码级别出发，而是以简单的基础知识补充，以及编写示例代码的方式讲清楚这一步分。

1.背景知识

1. 什么是合成事件？什么是原生事件？
2. 什么是事件委托机制？
3. 三个典型的 api，及相关代码示例

2. 先看下官网

首先，来看下官网 (opens new window)对合成事件的一些阐述。

3. 总结。

1. 同一个 DOM 绑定同时绑定原生和合成事件，他们的执行次序是？

2. 在合成事件中使用了 e.stoppropagation ？

3. 在原生中使用了 e.stop?

4. 如何解决弹窗问题？即在合成事件中阻止原生事件。

   那就把合成事件编程原生事件就好了啊！

事件委托（delegate）：就是 Jquery 中的 delegate 函数，之前只知道英文，翻译成中文就不知道是啥了。

参考文章：

1. 【字节大佬】由浅到深的React合成事件 (opens new window)

   此文章主要是从源码角度分析，但是 React v17 以后没有线程池的概念，因此在细节和解决问题的方法上面存在过时。