最近在使用滾輪事件的時(shí)候發(fā)現(xiàn)了這樣一個(gè)問題。
因?yàn)轫?xiàng)目中引入了jquery，在添加事件綁定時(shí)我就愉快地添加了：

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

結(jié)果頁面報(bào)錯(cuò)，告訴我說event沒有deltaY， 這就奇怪了。
我首先想到的是jquery一定封裝了event，它的事件綁定函數(shù)中的event肯定不是原生的，畢竟jquery主要就是在干這事。。。（其實(shí)這也挺好，避免污染原生對象），于是我打印了這個(gè)event，果然：

圖1

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

后，果然就沒問題了。
那么，如果又想用jquery，又想用這些沒有被其封裝的原生屬性怎么辦呢？
其實(shí)不難注意到，在上面打印的jquery event對象里，有一個(gè)叫做originalEvent的屬性，它的值是一個(gè)WheelEvent。
咦？WheelEvent不就是原生event嗎？展開了這個(gè)屬性后，果然沒有猜錯(cuò)，就是它。

Paste_Image.png

也就是說，只要我們把最開始的代碼寫成：

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

就可以順利執(zhí)行了。
我又查看了click，mouseenter等幾個(gè)事件，發(fā)現(xiàn)它們也是這樣的結(jié)構(gòu)，只不過，像click這種“老資格”的事件，由于其屬性已經(jīng)很穩(wěn)定，因此jquery已經(jīng)把上面所有的原生屬性映射過來了。不需要我們過多操心，當(dāng)我們使用一些新的交互手段帶來的事件，比如一些手勢事件，或者是如本文提到的滾輪事件這種最近才有統(tǒng)一規(guī)范甚至還沒有統(tǒng)一規(guī)范的事件時(shí)，如果發(fā)現(xiàn)一些原生的屬性取不到，可以嘗試使用originalEvent.
當(dāng)然啦，如果你用ES6的話，使用解構(gòu)賦值可以一勞永逸地用原生event代替jquery event作為參數(shù)傳遞：

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