addEventListener之handleEvent

Posted 2023-04-23

参考技术A http://www.cnblogs.com/langjt/p/4324578.html
addEventListener()
方法是将指定的事件监听器注册到目标对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。

其中listener：当指定的事件类型发生时被通知到的一个对象。该参数必须是实现EventListener接口的一个对象或函数。即，第二个参数除了可以传入函数外，还可以传入对象。

也就是说事件会自动在传入对象中寻找handleEvent方法。

这样在 element 触发event事件后，调用的是handleEvent 方法，且其中的 this 是指实现EventListener接口的对象，这里指向obj对象。而普通的函数中的this 指向事件源：

这样就可以动态切换绑定事件的处理函数，而不需要remove之前的事件。

这样可以把不同事件的处理逻辑放到一起，根据事件类型区分即可，而不用为每个事件类型定义不同的处理函数了。因为处理逻辑都在同一对象中，也使程序更加“内聚”了。

DOM2标准不支持iE6，7，8

EventListener中的handleEvent

在研究代码时发现类似这样一段代码：

 1 function TEST() {}
 2 
 3 TEST.prototype = {
 4   init:function() {
 5     window.addEventListener(‘mousedown‘,this);
 6   },
 7   handleEvent:function(e) {
 8     alert(‘mousedown‘);
 9   }
10 };
11 
12 new TEST().init();

最初对于第5行不是很理解，为什么可以传一个this作为参数，并且最终还成功地执行了alert方法，毕竟this是一个构造函数而非具体的方法。

后来查阅了相关文档，发现关键之处在于handleEvent这个函数，该函数原本就存在于《DOM2级事件规范》中：

// Introduced in DOM Level 2:
interface EventListener {
  void handleEvent(in Event evt);
};

这个接口规定了handleEvent应该如何实现。也就是说，在使用addEventListener时，第二个参数可以传入一个对象、函数或者像上面的构造函数，在执行该语句时，它会自动

寻找参数中的handleEvent方法并执行，并且this指向这个参数，不会受addEventListener的影响。

目前如何更好地运用这一方式还在探索中。

 

参考资料：https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener