addEventListener中的EventListener接口对象

2023年4月17日 143次阅读 来源: 罗高

写在最前

脱漏的知识点：addEventListener的第二个参数不光能够传入一个函数，还能够传入一个完成了EventListener 接口的对象。

文档中的形貌

listener

当所监听的事宜范例触发时，会接收到一个事宜关照（完成了 Event 接口的对象）对象。listener 必需是一个完成了 EventListener 接口的对象，或者是一个函数

摘自MDN

我一向都是在listener中传入一个函数，经由过程监听事宜发作来完成一些逻辑。但是看到文档形貌中先提到了“一个完成了EventListener接口的对象”经由过程进一步检察文档相识到，这个对象指的就是一个含有handleEvent要领的对象。

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

当EventListener所注册的事宜发作时，该要领就会被挪用，同时会有一个event参数传入到要领中。

相识了观点以后就要看这个知识点能为现实开辟带来什么好处了

开辟中的运用

举个🌰

var obj = {
    a: 1,
    handleEvent: function(event) {
        alert(this.a)
    }
}
document.body.addEventListener('click', obj, false) // 1
document.body.addEventListener('click', obj.handleEvent, false) // undefined

从例子中能够看出，这类绑定obj会影响this的指向。也就是说我们能够应用这类特性，在处置惩罚事宜时运用obj中的私有属性或要领

再举个🌰

var obj = {
    a: 1,
    handleEvent: function(event) {
        alert(this.a)
    }
}
var anotherHandler = function(event) {
    alert('hello world')
}
document.body.addEventListener('click', obj, false) // 1
setTimeout(function(){
    obj.handleEvent = anotherHandler // hello world
},2000)

从这个例子中能够看出，这类情势的事宜绑定，很轻易就可以动态转变处置惩罚事宜的逻辑。不需要先remove再add。

写在末了

这类绑定体式格局的瑕玷不在于兼容性方面，应该是可读性方面的缺点。我在看他人的源码时看到这个时异常迷惑（个人程度有限也占肯定的缘由），直到查阅了材料以后才晓得有如许的一种绑定事宜的写法。

所以，一样平常事情开辟中要运用如许的写法时，最好肯定一下一同开辟的小伙伴是否是也清晰这类体式格局，防止合作时的争执。

参考

MDN EventListener

MDN EventTarget.addEventListener()

handleEvent与addEventListener

通例

本篇原文出自 Roy’s Blog

    原文作者：罗高
    原文地址: https://segmentfault.com/a/1190000015573991
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞