addEventListener与handleEvent关系

addEventListener是用来注册事件的，通常第二个参数我们传入的是一个回调函数，但是今天我在看Headroom.js的源码的时候，发现居然是可以传入object，只需要这个object具有handleEvent属性即可。

区别

既然都是调用一个方法，那么他们直接的区别到底是什么呢？很直观的感受应该就是this指向了，下面我们用代码来进行一下说明:

// using funcion handle
function clickHandler() {
    console.log('clickHandler:', this);
}
window.addEventListener('click', clickHandler, false);

// using obj handle
var handleObj = {
    handleEvent: function() {
        console.log("handleEvent obj:", this);
    }
}
window.addEventListener('click', handleObj, false);

我们在控制台分别测试一下，就会发现函数传递的时候，this指向的注册的对象。而对象处理的方式，this指向的是对象本身。这样当我们需要在处理函数中再操作对象的时候，就方便多了。

参考资料

• MDN: addEventListener

原文: https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/addEventListener-and-handleEvent.html