React事件机制（二）React合成事件
最新回答
①苆侒ぬ
2026-03-29 18:17:32
在前一节中，我们了解了React的原生事件机制。现在，我们将转向React合成事件，一个旨在解决浏览器兼容性问题而实现的独特事件处理系统。
让我们回顾上一节中的例子，其中我们给`document`元素绑定了捕获事件。若在捕获事件中调用`ev.stopPropagation()`，会发生什么？答案是捕获阶段在`document`元素停止，后续冒泡过程因此中断。此现象展示了事件流的特性：从外向内捕获，从内向外冒泡。
在本节中，我们将重点放在React合成事件上。为了展示效果，我们展示了在`root`元素中同时应用捕获和冒泡的`click`事件。
React合成事件是基于原生事件进行封装，旨在提供统一的事件处理方式。在JSX中，我们分别为`inner`和`outer`元素声明了`onClick`和`onClickCapture`。
这里有一个问题：我们是否给`inner`的`onClick`和`onClickCapture`实际绑定了冒泡和捕获事件？回答这一问题，只需在公屏上键入“是”或“不是”。
接下来，我们将比较原生DOM元素的原生事件与React合成事件的输出信息，分析事件执行顺序。
我们分析一个例子，其中`document`、`body`、`root`、`outer`和`inner`都绑定了捕获和冒泡的`click`事件。在React对象`[outer]`和`[inner]`上声明了`onClick`和`onClickCapture`。按照事件流理论，我们预期`outer`和`inner`的合成事件执行顺序与原生事件不同。
在分析时，我们发现React合成事件并非直接绑定事件至`outer`和`inner`元素，而是通过事件委托在`root`元素上实现。这意味着`[outer]`的`onClick`在事件冒泡至`root`后才执行，而非在事件触发时立即执行。
为了验证这一理解，我们添加了`outer`元素的停止冒泡处理。结果证实了我们的分析：事件传播至`root`时被阻止，导致`[outer]`和`[inner]`的合成事件未被触发。
总结，React合成事件基于事件委托工作，而React 17、18在`root`元素上实现委托，React 16在`document`元素上实现。因此，在任何`root`元素内的子元素中阻止事件传播，将导致在React视图中声明的事件无法执行。
既然理解了合成事件的实现原理，接下来的作业是重新绘制今天的事件流，以此验证对React合成事件的理解。答案将在下一篇文章中揭晓。
热门标签
