React onClick未传event参数仍能访问原生事件对象是什么原因？

原因说明 #

这是浏览器的遗留兼容特性，和React、你的项目工具链都没有关系。

1. 核心逻辑：全局window.event对象 #

早期IE浏览器实现了一个全局的event属性（挂载在window下），每次DOM事件触发时，该属性会被赋值为当前触发事件的原生事件对象。后续主流浏览器为了兼容旧时代的IE兼容代码，都保留了这个非标准特性。

你写的匿名函数没有显式接收event参数，也没有在当前作用域声明event变量，JS引擎会沿着作用域链向上查找，最终匹配到全局的window.event，所以可以正常打印，拿到的自然是原生事件对象，和React的合成事件体系无关。

2. 和React默认传参的差异 #

React的合成事件只会通过事件处理函数的第一个参数传入：

• 写法为onClick={(e) => console.log(e)}时，拿到的e才是React封装的合成事件对象
• 你的代码没有接收这个参数，自然不会拿到合成事件

3. 注意事项 #

该特性属于非标准的遗留兼容设计，绝对不要在生产代码中依赖这个写法：

• 在ES严格模式下，部分浏览器已经废弃了隐式的全局event访问，直接写event会抛出未定义错误
• 全局event属性会被后续触发的其他事件覆盖，异步代码中访问大概率会拿到错误的事件对象
• 部分小众浏览器、嵌入式环境没有实现这个兼容特性，代码会直接报错

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