一、引入

我們知道JavaScript的很多操作都是基於事件的監聽。事件監聽，就是在頁面上設定了很多函式的觸發規則，當用戶觸發事件之後，執行函式。

二、內容

addEventListener() 是一種新增事件的方式。它的引數：

addEventListener(type, listener, useCapture)；

type：事件型別

listener：執行函式

useCapture：是否捕獲執行

三、passiveListener

在一些事件中，我們會使用e.preventDafault();禁止掉瀏覽器的預設事件。只讓瀏覽器執行我們規定的函式。一般我們會這樣寫：

document.
 
addEventListener("touchmove", function (e) {
    e.preventDefault();
}, false);//禁止頁面滑動

問題：但是這樣會帶來一個問題，function執行的時候，才會去禁止瀏覽器的預設事件。在事件沒有觸發的時候，預設事件依然執行。這樣有時會造成瀏覽器的卡頓，同時有一些預設事件無法完全禁止。

解決原理：那麼我們在新增事件的時候，就明確告訴瀏覽器是否要禁止掉預設事件。這樣在瀏覽器執行的時候，就一定保證事件被禁止了。

chrome51 實現了這個功能。

addEventListener(type, listener, { ​ capture: false, ​ passive: false, ​ once: false })

addEventListener的第三個引數變成了一個物件。這個隊形有三個引數。

capture: 表示函式是否捕獲執行, passive: 表示是否執行預設事件，true執行，false不執行 once: 是否是單次事件，如果是true，執行完事件就被銷燬

ps：雖然passive明確表示了是否執行預設事件，但是函式內還是需要新增 e.preventDefault();否則無法禁止預設事件。

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, { passive: false
 
, capture: false });//禁止頁面滑動

四、應用

使用passiveListener使瀏覽器的滾動更加流暢。

在移動端可以禁掉瀏覽器左右滑動的前進和後退