addEventListener()与handleEvent()

MDN: 点击打开链接

方法声明

void handleEvent(in Event event);

方法
handleEvent()

当EventListener 所注册的事件发生的时候，该方法会被调用。

可以把任意对象注册为事件处理程序，只要它拥有 handleEvent 方法

void handleEvent(
  in Event event
);

  二.用handleEvent的优缺点

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

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的书籍，但一直没有见过这种用法，所以，写出来别人看不看得明白是个问题


原文链接：点击打开链接