addEventListener 参数如下:

  1. addEventListener(type, listener[, useCapture]);
  1. type,事件名称
  2. listener,事件处理器
  3. useCapture,是否捕获

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

  1. elem.addEventListener('click', function(ev) {
  2. // todo
  3. }, false);

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

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

  1. // _initEvents 863行,方法
  2. eventType(window, 'orientationchange', this);
  3. eventType(window, 'resize', this);
  4.  
  5. // eventType 42行,如下
  6. me.addEvent = function (el, type, fn, capture) {
  7. el.addEventListener(type, fn, !!capture);
  8. };

简化为如下测试代

  1. var obj = {handleEvent: function(ev) {
  2. console.log(ev)
  3. }}
  4. document.addEventListener('click', obj, false)

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

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

Interface EventListener (introduced in DOM Level 2)

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

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

  1. function Component(elem, option) {
  2. this.elem = elem
  3. this.handleEvent = function(ev) {
  4. if (ev.type === 'click') {
  5. this.updateNav()
  6. }
  7. if (ev.type === 'dblclick') {
  8. this.updateBottom()
  9. }
  10. }
  11. this.init()
  12. }
  13. Component.prototype = {
  14. init: function() {
  15. this.elem.addEventlistener('click', this, false)
  16. this.elem.addEventlistener('dblclick', this, false)
  17. },
  18. updateNav: function() {
  19. console.log('nav update')
  20. },
  21. updateBottom: function() {
  22. console.log('bottom update')
  23. }
  24. }

转载:原文:http://www.cnblogs.com/snandy/p/4877069.html

addEventListener 的事件函数的传递【转载】的更多相关文章

  1. 关于addEventListener中事件函数的this指向问题

    看代码: //定义一个可见的盒子用于绑定点击事件 var box = document.getElementById('box'); box.x = 'box' //设置执行函数的对象属性 funct ...

  2. malloc 与 free函数详解<转载>

    malloc和free函数详解   本文介绍malloc和free函数的内容. 在C中,对内存的管理是相当重要.下面开始介绍这两个函数: 一.malloc()和free()的基本概念以及基本用法: 1 ...

  3. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  4. 从cocos2dx中寻找函数指针传递的方法

    目的 看到群里有个朋友搞了好几天函数指针传递,没搞好.所以写一篇文章,旨在从cocos2dx中帮朋友们找到如何传递指针. 旧版本的函数指针传递 全局函数函数指针调用 一般在C++11之前,我们一般是这 ...

  5. 如何在JavaScript里防止事件函数的高频触发和调用

    网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用.用户的动作有些频率非常高,有的十分罕见.有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死.拿浏览器窗口的resi ...

  6. jquery事件函数和原生事件绑定函数中return false的区别

    一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...

  7. 细说addEventListener与事件捕获

    细说addEventListener与事件捕获.事件冒泡(一)addEventListener的基本用法 在复杂的项目开发中,javascript和html的解耦变得至关重要,我们被推荐使用事件动态绑 ...

  8. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  9. cocos2dx+lua注册事件函数详解 事件

    coocs2dx 版本 3.1.1 registerScriptTouchHandler             注册触屏事件 registerScriptTapHandler             ...

随机推荐

  1. Python基础知识总结

    看了一个礼拜Python的书,断断续续的看了一大半.今天刚好没有课,想着也没什么事情干,就把这几天Python总结一下,都是一些基础知识 变量和对象的引用 在python中一切都是对象,不像C,jav ...

  2. SQL语言知识点总结

    1.DQL.DML.DDL.DCL的概念与区别 一.SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下: 1974年- ...

  3. 利用python多线程实现多个客户端与单个服务端的远程ssh

    本次实验设计两个方面的代码,第一个是客户端,代码如下: import os from socket import * c = socket(AF_INET,SOCK_STREAM) c.connect ...

  4. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  5. SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html

    SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...

  6. PHP,Mysql根据经纬度计算距离并排序

    网上给出的计算公式是这样的: Lng1表示A点纬度和经度,Lat2 Lng2 表示B点纬度和经度 a = Lat1 – Lat2为两点纬度之差 b = Lng1 -Lng2 为两点经度之差 6378. ...

  7. MMORPG战斗系统随笔(四)、优化客户端游戏性能

    转载请标明出处http://www.cnblogs.com/zblade/ 说到游戏性能,这是一个永恒的话题.在游戏开发的过程中,性能问题一直是我们研发需要关注的一个节点.当然,说句客观话,很多程序员 ...

  8. webpack2使用ch6-babel使用 处理es6 优化编译速度

    1 目录结构 安装依赖 cnpm install --save-dev babel-loader babel-core babel-preset-env babel-preset-latest &qu ...

  9. JavaWeb之response响应中文乱码问题

    response向页面响应中文乱码问题  字节流 * 有可能乱码,与中文转换成字节数组.浏览器打开的默认字符编码有关 * 解决方式:将中文转成字节数组的时候和浏览器默认打开的时候采用的字符集一致 re ...

  10. 前端要革命?看我在js里写SQL

    在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...