addEventListener()的第三個參數能夠傳對象了

在你的印象裏是否是這樣的target.addEventListener(type, listener[, useCapture])

新的語法

1. target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]);

   • type 表示監聽事件類型的字符串
   • listener 當所監聽的事件類型觸發時，會接收到一個事件通知
   • options (可選)
     1. capture 表示listener會在該類型的事件捕獲階段傳播到該EventTarget 時觸發。
     2. once 表示listener在添加以後最多隻調用一次。若是是 true，listener會在其被調用以後自動移除。
     3. passive 表示listener永遠不會調用preventDefault()。若是listener仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告。

實例

html結構

<nav id="menu"><a href="https://juejin.im">首頁</a></nav>
複製代碼

獲取引用

var nav = document.getElementById('menu')
var link = nav.firstElementChild
複製代碼

capture: 表示listener會在該類型的事件捕獲階段傳播到該EventTarget 時觸發

menu.addEventListener('click', function (e) {
    console.log('menu clicked!')
}, { capture: true })
link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false })

// menu clicked!
// link clicked!
複製代碼

once: 表示listener在添加以後最多隻調用一次。若是是 true，listener會在其被調用以後自動移除

link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false,once:true })

//輸出一次link clicked!後自動移除listener函數，再次點擊無效。

複製代碼

passive: 表示listener永遠不會調用preventDefault()。若是listener仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告

link.addEventListener('click', function (e) {
    e.preventDefault();
    console.log('link clicked!')
}, { capture: false,passive:true })

//控制檯輸出:Unable to preventDefault inside 
passive event listener invocation. 
連接跳轉
複製代碼

使用 passive 改善的滾屏性能,添加passive參數後，touchmove事件不會阻塞頁面的滾動（一樣適用於鼠標的滾輪事件）

addEventListener('touchmove', function listener() {
/* do something */ }, { passive: true });
複製代碼

兼容性

瀏覽器	chrome	Firefox	IE
capture	49.0	49.0	未實現
passive	51.0	49.0	未實現
once	55	50	未實現

注意：那些不支持參數options的瀏覽器，會把第三個參數默認爲useCapture，即設置useCapture爲true