最近在写js的类库，模仿的是jquery的编程风格，当封装到事件监听的时候发现遇到了一个问题，代码是这样的:

上面是封装的一个事件委托的代码，我以为上面的封装跟普通的事件监听一样简单，结果我在调用时发现报错：

为什么会报这样的错，原来是不同于单一的onclick之类的事件，这边的this指向的是调用addEventListenner的的对象;

为了简化问题，我们将其拿到全局范围中单独去测试:

发现这里的this指向的就是div标签，这就是为什么在原型中调用$(this)会出错

因为是执行的上下文不同，所以我们这边只要想办法改变this的指向就行了，我们需要的是让事件指向事件触发源

如上调用一下call()使得this指向ev.srcElement

在JS事件封装时，addEventListener()方法的this问题的更多相关文章

  1. js事件 （包含call()方法使用特点）

    1.焦点事件 获取焦点事件onfocus\失去焦点事件onblur 例: oText.onfocus=function(){} 焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么它就可 ...

  2. Node.js事件的正确使用方法

    前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...

  3. JS如何封装一些列方法为一个对象的操作，然后集中管理这些操作，方便修改和调用

    var Api = { ajax:{ // 添加项目 旧! add_project : function(pro_name, html, css, js,callback) { $.post(&quo ...

  4. js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  5. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  6. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  7. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  8. js事件之神奇的onclick

    21:58 2013/7/1 <a href="#" onclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...

  9. （转载）JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

随机推荐

  1. Linux项目自动部署

    场景:linux中自动部署项目在工作中经常遇到,快速高效的部署项目能够大幅提高工作效率.现在将项目部署的过程记录下来,以供参考,其中用到的知识点现在还有很多不很清楚,后面要好好琢磨琢磨! 1 项目部署 ...

  2. Hello ReactJS

    前言 React学习前先搭好环境,官网的例子看着比较分散.结合webpack就可以体验完整的es6开发流程了. 源码:https://github.com/Ryan-Miao/hello-react- ...

  3. MySQL优化 - 所需了解的基础知识

    时隔一年半,期间一直想写但却觉得没有实质性的内容可记录,本文为 [高性能MySQL] 的学习日志整理分享(感兴趣建议读原书). 优化应贯穿整个产品开发周期中,开发过程中考虑一些性能问题与影响,总比出问 ...

  4. 灵玖软件NLPIRParser智能文本聚类

    随着互联网的迅猛发展,信息的爆炸式增加,信息超载问题变的越来越严重,信息的更新率也越来越高,用户在信息海洋里查找信息就像大海捞针一样.搜索引擎服务应运而生,在一定程度上满足了用户查找信息的需要.然而互 ...

  5. year：2017 month：08 day：03

    2017-08-03 JAVAse 继承 继承:通过extends关键字可实现类与类之间的继承 父类:基类/超类 子类:派生类 1.继承的特点:单继承[一个类只能有一个父类]多层次[父类还可有父类] ...

  6. Python LeetCode

    Python不熟悉 不同的做法 404. Sum of Left Leaves 这是我的做法,AC. class Solution(object): res = 0 def recursive(sel ...

  7. 电脑只能上QQ，不能上网浏览网站怎么解决

    这个问题通常是因为网络的DNS解析出错引起的.QQ一类的聊天软件有自动的网络解析,不需要DNS便可以使用,而一般的浏览器是需要DNS解析来访问网页的.所谓DNS,即域名服务器(Domain Name ...

  8. VMware NAT端口映射 外网可以访问内网虚拟机

    我想尝试的是利用本机的ip+port来访问虚拟机上的web服务器,因为这样的话,我就能够将我的web服务器部署成为一个能让外网访问的服务器了,首先说下我的环境: 主机:系统win7,ip地址172.1 ...

  9. vuex状态管理,state,getters,mutations,actons的简单使用（一）

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

  10. 七月SSL行业新闻回顾

    大事件一:被泄露的私钥和基于假私钥进行的撤回 上个月,我们报告说Spotify和Cisco在应用程序中捆绑了有效证书的私钥.这些证书将根据基准要求被撤销,但应用程序不是泄露私钥的唯一来源.Koen R ...