addEventListener中的EventListener介面物件

RoyLuo發表於2018-07-09
dev物件

寫在最前

遺漏的知識點：addEventListener的第二個引數不光可以傳入一個函式，還可以傳入一個實現了EventListener 介面的物件。

文件中的描述

listener

當所監聽的事件型別觸發時，會接收到一個事件通知（實現了 Event 介面的物件）物件。listener 必須是一個實現了 EventListener 介面的物件，或者是一個函式

摘自MDN

我一直都是在listener中傳入一個函式，通過監聽事件發生來實現一些邏輯。然而看到文件描述中先提到了“一個實現了EventListener介面的物件”通過進一步檢視文件瞭解到，這個物件指的就是一個含有handleEvent方法的物件。

var obj = {
   // ...
    handleEvent: function(event) {
        // ...
        console.log('event', event)
    }
}
document.body.addEventListener('click', obj, false)
複製程式碼

當EventListener所註冊的事件發生時，該方法就會被呼叫，同時會有一個event引數傳入到方法中。

瞭解了概念之後就要看這個知識點能為實際開發帶來什麼好處了

開發中的應用

舉個?

var obj = {
    a: 1,
    handleEvent: function(event) {
        alert(this.a)
    }
}
document.body.addEventListener('click', obj, false) // 1
document.body.addEventListener('click', obj.handleEvent, false) // undefined
複製程式碼

從例子中可以看出，這種繫結obj會影響this的指向。也就是說我們可以利用這種特點，在處理事件時使用obj中的私有屬性或方法

再舉個?

var obj = {
    a: 1,
    handleEvent: function(event) {
        alert(this.a)
    }
}
var anotherHandler = function(event) {
    alert('hello world')
}
document.body.addEventListener('click', obj, false) // 1
setTimeout(function(){
    obj.handleEvent = anotherHandler // hello world
},2000)

複製程式碼

從這個例子中可以看出，這種形式的事件繫結，很方便就能動態改變處理事件的邏輯。不需要先remove再add。

寫在最後

這種繫結方式的缺點不在於相容性方面，應該是可讀性方面的缺陷。我在看別人的原始碼時看到這個時非常疑惑（個人水平有限也佔一定的原因），直到查閱了資料之後才知道有這樣的一種繫結事件的寫法。

所以，日常工作開發中要使用這樣的寫法時，最好確定一下一起開發的小夥伴是不是也清楚這種方式，避免協作時的衝突。

參考

MDN EventListener

MDN EventTarget.addEventListener()

handleEvent與addEventListener

慣例

本篇原文出自 Roy's Blog

相關文章