Passive Event Listeners - 被動(dòng)事件監(jiān)聽器
在基于 Element-ui 寫項(xiàng)目的時(shí)候全肮，Chrome 提醒：
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
翻譯過來如下：
違反：沒有添加被動(dòng)事件監(jiān)聽器來阻止'touchstart'事件崭捍，請(qǐng)考慮添加事件管理者'passive'，以使頁面更加流暢摩梧。
出現(xiàn)如上提示這可能是由于console的過濾器選擇了 Verbose；
1、Verbose - 冗長(zhǎng),就是事無具細(xì)的把所有l(wèi)og顯示出來
2呛梆、Info - 顯示開發(fā)者自定義的log及錯(cuò)誤信息
3凯傲、Warnings - 顯示危險(xiǎn)信息
4犬辰、Errors - 顯示錯(cuò)誤信息
一般默認(rèn)的是Info,不會(huì)提示這個(gè)提醒，雖然這并不影響代碼的正常運(yùn)行冰单，但是既然提醒了還是弄明白是什么原因的好一些幌缝。
原因是什么呢？
原因是 Chrome51 版本以后诫欠，Chrome 增加了新的事件捕獲機(jī)制－Passive Event Listeners涵卵；
Passive Event Listeners：就是告訴前頁面內(nèi)的事件監(jiān)聽器內(nèi)部是否會(huì)調(diào)用preventDefault函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個(gè)信息更好地做出決策來優(yōu)化頁面性能荒叼。當(dāng)屬性passive的值為true的時(shí)候轿偎，代表該監(jiān)聽器內(nèi)部不會(huì)調(diào)用preventDefault函數(shù)來阻止默認(rèn)滑動(dòng)行為，Chrome瀏覽器稱這類型的監(jiān)聽器為被動(dòng)（passive）監(jiān)聽器被廓。目前Chrome主要利用該特性來優(yōu)化頁面的滑動(dòng)性能坏晦，所以Passive Event Listeners特性當(dāng)前僅支持mousewheel/touch相關(guān)事件。
以前的事件捕獲代碼如下：
document.addEventListener("click", fn, false/true);
第三個(gè)參數(shù)決定了 fn 函數(shù)是在冒泡還是捕獲階段觸發(fā)嫁乘。
現(xiàn)在第三個(gè)參數(shù)不但可以是布爾值昆婿，還可是一個(gè)對(duì)象。
document.addEventListener("mousewheel", fn, {passive: true})
由于passive對(duì)象只在Chrome瀏覽器中支持蜓斧，所以這里需要做一個(gè)兼容處理仓蛆。
var passiveSupported = false;
try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
}
});
window.addEventListener("test", null, options);
} catch(err) {}
function fn() {
console.log("fn")
}
document.addEventListener("mousewheel", fn, passiveSupported ? { passive: true } : false)
再看Chrome調(diào)試會(huì)發(fā)現(xiàn)，Chrome已經(jīng)不要提醒讓人頭的提醒法精。
以上就是對(duì)Passive Event Listeners——讓頁面滑動(dòng)更加流暢的新特性的相關(guān)介紹多律，希望對(duì)您學(xué)習(xí)javascript有所幫助。
