eventlistener 执行了两次：前端科普-addEventListener

eventlistener 执行了两次：前端科普-addEventListener没错，第二个参数不是 function，而是一个 object。一下糊涂了，世界观一时半会没改变过来。怎么能是一个对象呢？惯性思维和不看规范带来的后患是巨大的。点击文档没有报错，说明确实是可以这么使用的。在读 iscroll.js （5.1.3） 源码时发现还有这样一种写法 useCapture，是否捕获一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解的。多数时候是这么使用第一个参数没什么异议，第二个参数传一个 function，第三个参数传 false，事件流为了和低版本IE保持一致（都冒泡）。

注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！

addEventListener 参数如下

1. type，事件名称

2. listener，事件处理器

3. useCapture，是否捕获

一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解的。多数时候是这么使用

第一个参数没什么异议，第二个参数传一个 function，第三个参数传 false，事件流为了和低版本IE保持一致（都冒泡）。

在读 iscroll.js （5.1.3） 源码时发现还有这样一种写法

没错，第二个参数不是 function，而是一个 object。一下糊涂了，世界观一时半会没改变过来。怎么能是一个对象呢？惯性思维和不看规范带来的后患是巨大的。点击文档没有报错，说明确实是可以这么使用的。

实际 W3C DOM2 Events 里定义的listener，没说必须是 function 类型。

Interface EventListener (introduced in DOM Level 2)

只要实现了以上接口就都能作为 listener，简单说只要给对象添加 handleEvent 方法就可以作为 listener了。

通过这种方式添加事件的一好处就是当你采用类式开发时this能轻松的绑定到当前类上。如下

本头条号将对以后更新的文章进行归类，以方便大家阅读。比如文章的标题以Bootstrap开头，这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头，请各位客官留意。

《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号，也可以关注微信订阅号qianduanguancha（长按可复制）