为何React仍需合成事件解决跨浏览器兼容？原生事件与Babel存局限？

你提到的btn.addEventListener("click", someFunction);能跨浏览器运行，只是基础事件绑定的兼容，但React的合成事件解决的远不止这一个问题，具体来说：

1. 抹平原生事件的细节差异 #

基础的click事件绑定确实大部分浏览器都支持，但原生事件在不同浏览器里的事件对象属性、行为逻辑有不少差异：

• 早期IE里事件对象是window.event，标准浏览器则是回调参数里的event；IE用srcElement表示触发元素，标准浏览器用target
• 部分事件的冒泡/捕获逻辑在旧浏览器里不一致，比如focus、blur事件的冒泡行为
• 移动端事件（如touchstart）在不同浏览器里的触发时机、属性也有差异

React合成事件会把这些差异统一封装，不管你用什么浏览器，拿到的事件对象API都是一致的，比如始终用event.target获取触发元素，event.preventDefault()的行为完全统一。

2. 基于事件委托的性能优化 #

React不会给每个组件DOM节点单独绑定事件监听器，而是把所有事件都委托到根容器节点（比如#root或者document）。当事件触发时，通过事件冒泡找到对应的React组件，再执行对应的事件处理函数。

这种方式的好处是：

• 减少DOM事件监听器的数量，尤其在大型应用里，组件频繁挂载卸载时，不需要反复添加/移除监听器，降低内存开销
• 避免频繁操作DOM绑定事件，提升渲染性能

3. 支撑跨平台能力 #

React的目标不止是浏览器，还包括React Native、Electron等非浏览器环境。合成事件层抽象了一套与平台无关的事件模型，让你写的事件处理逻辑可以直接复用在不同平台上，而不用针对每个平台修改事件绑定代码。原生事件是浏览器特有的，没法做到这一点。

4. Babel无法解决事件模型的兼容问题 #

Babel的核心作用是转译ES语法（比如把ES6+语法转成ES5兼容代码），或者通过polyfill补充新的JS API（比如Promise、Array.prototype.includes）。但它没法修改原生事件的行为差异：

• 它不能把IE里的window.event.srcElement自动转换成标准的event.target
• 也没法统一不同浏览器里事件的冒泡、捕获规则

Babel解决的是语法层面的兼容，而React合成事件解决的是事件模型的行为逻辑兼容，两者的作用范围完全不同。

内容的提问来源于stack exchange，提问作者Dude