请说明 React 事件系统的处理机制，包括事件绑定、事件委托和合成事件的工作原理。

回答思路

1. 【回答框架 1】React 事件系统基于合成事件（SyntheticEvent）实现，它是对浏览器原生事件的跨浏览器封装。React 17 之前事件委托到 document，17 及之后委托到 React 根容器。
2. 【回答框架 2】事件处理函数通过 props 传递，如 onClick，React 在渲染时不会直接绑定到 DOM 元素，而是统一在根容器上监听，利用事件冒泡机制捕获所有事件，再根据事件目标找到对应的 fiber 节点，执行相应的处理函数。
3. 【回答框架 3】合成事件提供了统一的接口，如 stopPropagation 和 preventDefault，并解决了不同浏览器之间的差异。同时，React 会复用事件对象（事件池），在事件处理函数执行后重置属性，因此异步访问事件属性前需调用 persist()。
4. 【关键点 1】React 使用合成事件封装原生事件，提供跨浏览器一致性。
5. 【关键点 2】事件委托机制：React 17+ 将事件监听绑定到根容器（如 #root），而非 document。
6. 【关键点 3】事件处理函数在冒泡阶段触发，但可通过捕获阶段（onClickCapture）监听。
7. 【关键点 4】事件对象是合成事件，具有和原生事件相似的接口。
8. 【易错点 1】误以为事件直接绑定在元素上，实际是委托到根容器。
9. 【易错点 2】在异步回调中使用事件对象，未 persist() 导致属性丢失。
10. 【易错点 3】混淆合成事件的 stopPropagation 与原生事件的差异，可能阻止不了原生传播。