记一次使用 removeEventListener 移除事件监听失败的经历
测试一
测试代码如下
var Test = function() {
this.element = document.body;
this.handler = function() {
console.log(this);
};
this.element.addEventListener('click', this.handler.bind(this), false);
this.destroy = function() {
this.element.removeEventListener('click', this.handler, false);
};
};
var test = new Test();
但是,测试结果发现,调用 test.destroy()
后,点击依旧有效。明明按照以前看的文档说的,add 和 remove 的时候是同一个函数啊。
测试二
于是,又调整了一下代码。
var Test = function() {
this.element = document.body;
this.handler = function() {
console.log(this);
};
this.element.addEventListener('click', this.handler, false);
this.destroy = function() {
this.element.removeEventListener('click', this.handler, false);
};
};
去掉了 add 时的 bind,再测试发现点击不响应了。
结论
经过测试,add 和 remove 事件监听回调时,既不能使用匿名函数,也不能改变指定函数的上下文。
记一次使用 removeEventListener 移除事件监听失败的经历的更多相关文章
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- [转]addEventListener() 方法,事件监听
转载 白杨-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...
- addEventListener() 方法,事件监听
知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...
随机推荐
- QlikSense系列(1)——整体介绍
接触QlikSense(3.1 SR1)已经快一年了,在此记录自己的经验心得,为想了解QlikSense的小伙伴提供一个参考. 1.产品介绍 Qlik公司以QlikView产品成名,QlikSense ...
- libz.so.1: cannot open shared object file: No such file or directory
在虚拟机安装xtrabackup工具时候出现的报错:libz.so.1: cannot open shared object file: No such file or directory [ro ...
- uva 11082 Matrix Decompressing 【 最大流 】
只看题目的话~~怎么也看不出来是网络流的题目的说啊~~~~ 建图好神奇~~ 最开始不懂---后来看了一下这篇-- http://www.cnblogs.com/AOQNRMGYXLMV/p/42807 ...
- iOS性能优化专题
http://wereadteam.github.io/2016/05/03/WeRead-Performance/ https://www.cnblogs.com/oc-bowen/p/599999 ...
- table标签 在谷歌和ie浏览器下不同的表现效果
在项目中有了一个这样的需求: 我需要利用vue的模板语法v-for循环生成tr,这个tr是需要双重循环来确定其个数的, 我的实现: 我在tr外面包了一个template标签, 效果: 谷歌浏览器下实现 ...
- CF482C Game with Strings (状压DP+期望DP)
题目大意:甲和乙玩游戏,甲给出n(n<=50)个等长的字符串(len<=20),然后甲选出其中一个字符串,乙随机询问该字符串某一位的字符(不会重复询问一个位置),求乙能确定该串是哪个字符串 ...
- JavaScript div 上下运动实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- php安装redis扩展 windows
官方php_redis.dll 找了很久,感谢热心的网友,这是php官方的 php_redis.dll http://windows.php.net/downloads/pecl/releases/r ...
- C#WIFI搜索与连接
1.功能搜索WIFI并连接 2.所用工具及资源:VS2012 Managed Wifi API(即:引用ManagedWifi.dll文件地址:http://files.cnblogs.com/fil ...
- mysql-5.7.10-winx64 安装
安装ZIP中的EXE文件后,找到安装目录中的my-default.ini加入代码 1 2 3 4 5 6 #新设置的 [mysql] default-character-set=utf8 #新设置的 ...