addEventListener()的第三個引數可以傳物件了

孤城芝戀發表於2019-03-04
dev物件

在你的印象裡是不是這樣的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

相關文章