addEventListener中的EventListener接口对象

szysky 发布于2019-08-22 18:35 / 1591人阅读

摘要：写在最前遗漏的知识点的第二个参数不光可以传入一个函数，还可以传入一个实现了接口的对象。文档中的描述当所监听的事件类型触发时，会接收到一个事件通知实现了接口的对象对象。

写在最前

遗漏的知识点：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参数传入到方法中。

了解了概念之后就要看这个知识点能为实际开发带来什么好处了

开发中的应用

举个

私有云海外云主机 EventListener js中的对象 php时间轴中的对象 js包装对象中的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96012.html

理解Event冒泡模型

摘要：具体的模型可以看冒泡模型上面的官方文档中，我只研究一下捕获阶段和冒泡阶段。修复第二个我们既然知道了第二个产生的原因，那么我们阻止冒泡顺序解决的方案，不让其往上冒泡，自己管理。本文探索一下Event的冒泡过程和初学遇到的几个小bug DOM Event概述 Event接口是检测在DOM中的发生的所有事件，我们一直在用，而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE...

MadPecker 2019-08-01 18:24 评论0 收藏0
理解Event冒泡模型

摘要：具体的模型可以看冒泡模型上面的官方文档中，我只研究一下捕获阶段和冒泡阶段。修复第二个我们既然知道了第二个产生的原因，那么我们阻止冒泡顺序解决的方案，不让其往上冒泡，自己管理。本文探索一下Event的冒泡过程和初学遇到的几个小bug DOM Event概述 Event接口是检测在DOM中的发生的所有事件，我们一直在用，而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE...

zeyu 2019-08-22 13:50 评论0 收藏0
理解Event冒泡模型

摘要：具体的模型可以看冒泡模型上面的官方文档中，我只研究一下捕获阶段和冒泡阶段。修复第二个我们既然知道了第二个产生的原因，那么我们阻止冒泡顺序解决的方案，不让其往上冒泡，自己管理。本文探索一下Event的冒泡过程和初学遇到的几个小bug DOM Event概述 Event接口是检测在DOM中的发生的所有事件，我们一直在用，而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE...

SimonMa 2019-08-29 14:14 评论0 收藏0
Vue组件之Tooltip

摘要：前言本文主要组件的大致框架，提供少量可配置选项。旨在大致提供思路常用于展示鼠标时的提示信息。由属性决定展示效果属性值为方向对齐位置四个方向。属性用于设置触发的方式，默认为。前言本文主要Alert 组件的大致框架，提供少量可配置选项。旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息。模板结构 ...

silenceboy 2019-08-21 17:06 评论0 收藏0