addEventListener中的EventListener接口對象

寫在最前

遺漏的知識點：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