在JS事件封装时，addEventListener()方法的this问题
最近在写js的类库，模仿的是jquery的编程风格，当封装到事件监听的时候发现遇到了一个问题，代码是这样的:
上面是封装的一个事件委托的代码，我以为上面的封装跟普通的事件监听一样简单，结果我在调用时发现报错：
为什么会报这样的错，原来是不同于单一的onclick之类的事件，这边的this指向的是调用addEventListenner的的对象;
为了简化问题，我们将其拿到全局范围中单独去测试:
发现这里的this指向的就是div标签，这就是为什么在原型中调用$(this)会出错
因为是执行的上下文不同，所以我们这边只要想办法改变this的指向就行了，我们需要的是让事件指向事件触发源
如上调用一下call()使得this指向ev.srcElement
在JS事件封装时，addEventListener()方法的this问题的更多相关文章
- js事件 （包含call()方法使用特点）
1.焦点事件 获取焦点事件onfocus\失去焦点事件onblur 例: oText.onfocus=function(){} 焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么它就可 ...
- Node.js事件的正确使用方法
前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...
- JS如何封装一些列方法为一个对象的操作，然后集中管理这些操作，方便修改和调用
var Api = { ajax:{ // 添加项目 旧! add_project : function(pro_name, html, css, js,callback) { $.post(&quo ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- js事件之神奇的onclick
21:58 2013/7/1 <a href="#" onclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...
- （转载）JS事件监听 JS:attachEvent和addEventListener使用方法
(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...
随机推荐
- (转)HTTP协议漫谈
HTTP协议漫谈 简介 园子里已经有不少介绍HTTP的的好文章.对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将HTTP协议的元素进行分类讲 ...
- perl的安装和版本切换工具-perlbrew
setenv PERL /opt/perl5 --设置新perl的起始安装路径 curl -kL http://install.perlbrew.pl | bash source /opt/perl5 ...
- PHP 调用 Go 服务的正确方式 - Unix Domain Sockets
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- nodeJS之crypto加密
前面的话 加密模块提供了 HTTP 或 HTTPS 连接过程中封装安全凭证的方法.也提供了 OpenSSL 的哈希,hmac, 加密(cipher), 解密(decipher), 签名(sign) 和 ...
- RabbitMQ入门-高效的Work模式
扛不住的Hello World模式 上篇<RabbitMQ入门-从HelloWorld开始>介绍了RabbitMQ中最基本的Hello World模型.正如其名,Hello World模型 ...
- SSH项目过一段时间之后再访问会报一次Could not open Hibernate session for transaction 异常，Caused by: com.mysql.jdbc.CommunicationsException: Communications link failure due to underlyi，再重新方法即可访问成功（通常出现在过了一晚之后再去访问系统）
前端时间到客户那去进行项目的上线测试,将项目部署好之后,运行都是正常的,可是每到了第二天早上访问的时候,就会报一个Could not open Hibernate session for transa ...
- (4)UIView和父子控件
IButton控件中除了有自身的属性之外还有继承的view的属性 内存地址一样,是同一个view来的,也就是最外层的view.
- swift3.0 顶部状态栏隐藏
横屏进入手机状态栏是隐藏的,但是调用了相册选去图片后顶部状态栏又显示了出来,网上查阅按照以下方式: override var prefersStatusBarHidden: Bool{ return ...
- css中的几个小tip（二）
margin的塌陷现象 (一)在标准文档流中, 垂直方向存在margin的塌陷现象 先上段代码: <style type="text/css"> .box{ width ...
- 最短路和次短路问题,dijkstra算法
/* *题目大意: *在一个有向图中,求从s到t两个点之间的最短路和比最短路长1的次短路的条数之和; * *算法思想: *用A*求第K短路,目测会超时,直接在dijkstra算法上求次短路; ...