最近在写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. LeetCode-Minimum Path Sum[dp]

    Minimum Path Sum Given a m x n grid filled with non-negative numbers, find a path from top left to b ...

  2. 【php】php 连接数据库

    $mysql_server_name=""; //数据库服务器名称 $mysql_username=""; // 连接数据库用户名 $mysql_passwor ...

  3. HTML5 开发APP(MUI的一些特性)

    先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/  .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...

  4. node 简介 起源

    最近的node 的一篇文章阅读量很大,所以写一篇基础篇供大家分享,抛砖引玉,各取所需. 部分内容来源大神笔记. Node.js 简介:@@@@@@@@@@@@@@@@@@@ Node.js是目前非常火 ...

  5. 小白读iOS冗余资源扫描脚本

    随着公司项目的不断功能迭代,项目的体积越来越大,各种瘦身策略迫在眉睫.由于平时使用Linux高级命令和 shell脚本的机会不多,之前学的知识一下子想起来很难.所有趁着这次看脚本,重新温习一下. 本文 ...

  6. 类似818tu.co微信小说分销系统设计之多公众号网页授权自动登录源码

    /** 转载请保留原地址以及版权声明,请勿恶意修改 *  作者:杨浩瑞  QQ:1420213383  独立博客:http://www.yxxrui.cn * [后台]http://xiaoshuo. ...

  7. springMVC 中几种获取request和response的方式

    1.最简单方式:参数 例如: @RequestMapping("/test") @ResponseBody public void saveTest(HttpServletRequ ...

  8. log4go的日志滚动处理——适应生产环境的需要

    日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...

  9. sort排序错乱问题

    对于sort排序  之前就遇到过这种问题  不过没有在意 今天遇到 就找了一下原理 在这种sort排序中可以看到排序几乎没有什么问题 就是5比较特殊 会在20是的后面 ~ sort()方法开始的时候会 ...

  10. 有關於USB保固

    ================================================= 版權聲明:如需轉載,請列明出處:HingAglaiaWong@博客園 支持原創,是對作者最好的的鼓勵 ...