handleEvent 與 addEventListener

一。handleEvent 是什麼東西

addEventListener(strEventType, func, false/true);

這應該是最常見的添加事件處理器的方式吧，其實第二個參數也可以是一個具有 handleEvent 屬性的對象，例如：

var obj = {
    // ...
    handleEvent: function() {
        // ...
        console.log('event fired');
    }
}
document.body.addEventListener('click', obj, false);

DOM2 級事件 定義了 add/removeEventListener, dispatchEvent, stopPropagation, preventDefault, initEvent, createEvent 等方法，而 add/removeEventListener 的第二個參數類型是 EventListener，在 EventListener 接口的定義 中可以看到要求實現 handleEvent 方法

換言之，實現 Eventlistener 有兩種方式：

• function 對象默認實現了 Eventlistener 接口

• 給對象實現 handleEvent 方法

更多信息請查看 DOM3 級 event listener

二。用 handleEvent 的優缺點

###1.this 的指向

以 addEventListener('click', obj, false); 方式添加事件處理器後，事件處理函數 obj.handleEvent 中的 this 自然是指向 obj 的

以 addEventListener(strEventType, func, false/true); 方式添加事件處理器後，事件處理函數 func 中的 this 是指向事件處理器的宿主元素（說白了就是 ele.addEventListener 中的 ele），例如：

var ele = document.getElementById('test');
function handler(e) {
    console.log(this === ele);  // true
}
ele.addEventListener('click', handler, false);

用 addEventListener('click', obj, false); 好處是可以直接使用 obj 對象的���有屬性，可以對比來看：

var obj = {
    // ...
    attr: 1,
    handleEvent: function() {
        // ...
        console.log(this.attr); // undefined，因為事件觸發後，this 是指向宿主元素 body 的，而 body 沒有 attr 屬性
    }
}
document.body.addEventListener('click', obj.handleEvent, false);

###2. 動態改變事件處理器

可以動態地改變事件處理器，例如：obj.handleEvent = obj.handler2; 或者 obj.handleEvent = fun;，非常方便，不用先 remove 再 add

###3. 缺點

缺點不在兼容性上（DOM2 級事件 IE9+ 支持，換句話說，能用 addEventListener 的地方就能用 obj.handleEvent），而是可讀性方面的。筆者自認為看過不少關於 JS 的書籍，但一直沒有見過這種用法，所以，寫出來別人看不看得明白是個問題

參考資料

• addEventListener 之 handleEvent：原文 404 了，只好貼上轉載版