通过鼠标的滚动来实现图片的放大和缩小，没错，像我这样不思进取的小白，从来不会自己动手撸一遍。

主要的功能函数：

一开始还挺纳闷为什么没有传入event参数也可以在函数中访问到，想起曾经是要传入一个event/e的呀，后来百度了一下，事件event是window里的东西。

然后回到react项目中，首先是要获取到img的真实的dom元素，使用了ref。

获取到真实的DOM元素后，然后再将功能函数放上去就可以了；

嘿嘿，任务完成。拜拜！

其实，我应该可以早点下班回去的。

然后，想把这个再写一遍，放到自己的GitHub上。

就在下班之际，我create-react-app搭建了一个学习用的react。

然后开开心心的将代码从项目上复制过去，然后结果功能函数里报错了：

然后就开始一脸蒙蔽了，怎么会就找不到event了，明明使用的都是react框架呀，怎么就错了呢，因为项目我是接手的，所以我就猜想是不是装了什么插件，而我的react可是什么都没有呀，我的老天鹅。。。百思不得其姐。

报的错误是：Unexpected use of ‘event’ no-restricted-globals；

然后复制粘贴百度

结果这一堆东西，好像没有我想要的答案。

然后又回到了代码上，给它传了一个参数event：

我以为这样应该是可以了，确实没有报错了，但是滚动鼠标没有图片没有放大缩小。

问题继续。。。

然后我将两个的imgDom和event打印出来一看，发现了不同的地方：

失败的event是Class，成功的event是WheelEvent；

然后我再将失败的event.wheelDelta给打印出来是undefined

这就使我非常纳闷了，怎么会这样呢？

然后又是各种百度。。。结果搜不到，也可能是自己百度的功底还有待加强。

一看时间，靠，十点半了，撤。。不然广州的地铁就要休息了。

第二天下午我问了问隔壁的同事，他也和我一样一开始有点蒙蔽，谁叫我们都那么的白呢。

然后，我们俩就开始继续折腾这个问题。

他叫我点开Class和WheelEvent对比一下，看看有什么不同，确实它们的大部分属性都是相同的，然后继续点开_proto_，然后在Class到Object之间发现了 _proto_：SyntheticEvent；这个东西引起他的注意，于是他叫我百度了一下这个单词，然后进入了react的文档：合成事件(SyntheticEvent)；感觉这篇文档就是答案的关键。然后耐下心来看完这篇文档，这个内容还是第一次看。确实文档中还有很多的东西没有看，自己也就看了主要概念，高级指南也只看了点点。

那么SyntheticEvent是什么呢？看看中文文档的概述：

然后通过event.antiveEvent就可以访问到Class中的WheelEvent，这样就可以使用滚轮事件了。不过说来也真实蠢，命名Class的log里type前面就有nativeEvent：WheelEvent；但是自己心瞎就是看不到。然后我将event改成了event.nativeEvent就成功了：

然后我不传入event了，直接使用window.event:

也成功了。

原来react的合成事件是将事件event合并到了它的事件了，直接访问是event是

不可以访问到window下的event事件。

但是有一点还是想不明白，那就是两个都是react写的，为什么一个可以，一个却不行？

后来看了两个react的版本号：

一个是16.4.0的：

一个是16.6.3的：

如果不是某些插件导致的，或许就是版本号的问题了。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享