最近在写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. （转）Bat Command

    1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置.语法 echo [{on|off}] [message] Sample篅echo off ...

  2. (转)java for循环的执行顺序和几种常用写法

    算是温习吧.问题比较基础,但是也比较重要.(虽然是C,但是很经典) for循环可以说在每个程序中都少不了的,语句头包括三个部分:初始化,判读条件,一个表达式. 但是这三个部分的执行顺序是什么,这是我们 ...

  3. Spring-Framework 源码阅读之AnnotationBeanUtils

    Java程序员,就是要学会一个名字叫做"春"的东西,这玩意运用的非常的广泛,现在如果你的业务系统或者软件没有在这个东西上开发,都不要意思拿出来.因为你更不上时代了.在平时的工作的中 ...

  4. 统一代码风格工具——editorConfig

    前面的话 在团队开发中,统一的代码格式是必要的.但是不同开发人员的代码风格不同,代码编辑工具的默认格式也不相同,这样就造成代码的differ.而editorConfig可以帮助开发人员在不同的编辑器和 ...

  5. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  6. [基础]PeopleSoft中的作业和调度作业集合定义

    PeopleSoft进程调度器可以使一个或多个进程作为一个组.这个组在PeopleSoft中被称为作业(Job). PeopleSoft进程被定义为单个任务,程序或例程,例如cobol程序或AE程序或 ...

  7. Go语言学习笔记（七）杀手锏 Goroutine + Channel

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 Goroutine Go语言的主要的功能在于令人简易使用的并行设计,这个方法叫做Goroutine,通过Gorou ...

  8. hexdump命令的使用

    hexdump命令是Linux下的打印16进制的利器,它可以按我们指定的格式输出16进制,特别有用,配合eeprom来用简直是绝配. 今天我们来介绍一个hexdump命令的使用: 首先我们准备一个测试 ...

  9. 脱壳练习之bitarts 5.0

    运行界面 一开始不是PUSHAD,这里我们跟到PUSHAD指令处,按F7执行该指令,接着在寄存器窗口中定位到ESP寄存器的值,在其上面单击鼠标右键选择-Follow in Dump. 仅允许非商业转载 ...

  10. 前端到后台ThinkPHP开发整站（6）

    今天终于把整个后台管理系统弄好了,其实没什么难点,只是作为一个Thinphp学习的练手项目,这个项目,现在还只能算是做了一半,还有前台展示方面的功能没有完成.先过一遍后台的功能吧! 1.首页 2.菜单 ...