http://www.cnblogs.com/langjt/p/4324578.html
addEventListener()
方法是将指定的事件监听器注册到目标对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。
element.addEventListener(type, listener[, useCapture]);
其中listener：当指定的事件类型发生时被通知到的一个对象。该参数必须是实现EventListener接口的一个对象或函数。即，第二个参数除了可以传入函数外，还可以传入对象。
那么实现EventListener接口的对象有什么特征呢？
interface EventListener {
// 注意：该接口属于DOM2, 所以IE6~IE8不能直接使用哦~
void handleEvent(Event evt);
};
也就是说事件会自动在传入对象中寻找handleEvent方法。
1.好处之一：
var obj = {
name: 'foo',
handleEvent: function() {
alert('click name='+ this.name);
}
};
document.body.addEventListener('click', obj, false);
这样在 element 触发event事件后，调用的是handleEvent 方法，且其中的 this 是指实现EventListener接口的对象，这里指向obj对象。而普通的函数中的this 指向事件源：
document.body.addEventListener('click', function() {
console.log(this == document.body); // output: true
}, false);
2.好处之二：
var obj = {
name: 'foo',
handleEvent: function() {
alert('click name='+ this.name);
}
};
document.body.addEventListener('click', obj, false);
function changeHandler() {
obj.handleEvent = function() {
alert("change the click handle!");
};
}
// 5秒后动态改变事件处理函数
setTimeout(function() {
changeHandler();
}, 5000);
这样就可以动态切换绑定事件的处理函数，而不需要remove之前的事件。
3.好处之三
var obj = {
name: 'foo',
handleEvent: function(e) {
switch(e.type) {
case "click":
console.log("click event");
break;
case "mousedown":
console.log("mousedown event");
break;
}
}
};
document.body.addEventListener('click', obj, false);
document.body.addEventListener('mousedown', obj, false);
这样可以把不同事件的处理逻辑放到一起，根据事件类型区分即可，而不用为每个事件类型定义不同的处理函数了。因为处理逻辑都在同一对象中，也使程序更加“内聚”了。
注意
DOM2标准不支持iE6，7，8
