jquery中的event与originalEvent

最近在使用滚轮事件的时候发现了这样一个问题。
因为项目中引入了jquery，在添加事件绑定时我就愉快地添加了：

$('.mask').on('wheel', function (event) {
    let offset = event.deltaY
    ...
})

结果页面报错，告诉我说event没有deltaY， 这就奇怪了。
我首先想到的是jquery一定封装了event，它的事件绑定函数中的event肯定不是原生的，毕竟jquery主要就是在干这事。。。（其实这也挺好，避免污染原生对象），于是我打印了这个event，果然：

图1
这个Event中压根就没有原生wheel事件中的deltaX, deltaY, deltaZ等一系列专有属性。
将上面代码改为原生js代码：

document.querySelector('.mask').addEventListener('wheel', function (event) {
    let offset = event.deltaY
    ...
})

后，果然就没问题了。
那么，如果又想用jquery，又想用这些没有被其封装的原生属性怎么办呢？
其实不难注意到，在上面打印的jquery event对象里，有一个叫做originalEvent的属性，它的值是一个WheelEvent。
咦？WheelEvent不就是原生event吗？展开了这个属性后，果然没有猜错，就是它。

Paste_Image.png

也就是说，只要我们把最开始的代码写成：

$('.mask').on('wheel', function (event) {
    let offset = event.originalEvent.deltaY
    ...
})

就可以顺利执行了。
我又查看了click，mouseenter等几个事件，发现它们也是这样的结构，只不过，像click这种“老资格”的事件，由于其属性已经很稳定，因此jquery已经把上面所有的原生属性映射过来了。不需要我们过多操心，当我们使用一些新的交互手段带来的事件，比如一些手势事件，或者是如本文提到的滚轮事件这种最近才有统一规范甚至还没有统一规范的事件时，如果发现一些原生的属性取不到，可以尝试使用originalEvent.
当然啦，如果你用ES6的话，使用解构赋值可以一劳永逸地用原生event代替jquery event作为参数传递：

$('.mask').on('wheel', function ({ originalEvent: event }) {
    let offset = event.deltaY
    ...
})