addEventListener()与removeEventListener(),追加事件和删除追加事件
addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为false;
要在按钮上为click事件添加事件处理程序,可以使用下列代码:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,如下面的例子所示:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效!
alert(this.id);
}, false);
在这个例子中,removeEventListener无法删除addEventListener所追加的事件,因为两个方法并不相等,内存地址已经是不同的,如下面的例子所示:
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效!
重写后的这个例子没有问题,是因为在addEventListener()和removeEventListener()中用来相同的函数。
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序;
亲测:
方法的内存地址十分的重要,一定要相同才可以删除;试过遇到的坑:
var clickFun = null;
aa = function(){
clickFun = function(){
alert("1")
}
window.removeEventListener("click",clickFun,false)
window.addEventListener("click",clickFun,false)
}
setInterval(function(){
aa()
},2000)
需求,需要不断地往一个function里面塞数据,里面会有追加,如果不删除了话,会一直追加上去,不环保并且耗内存,必须要删掉追加;然而像上面这样写的话,由于removeEventListener和addEventListener里面的clickFun内存不相等,导致删除不成功;调整如下:
var clickFun = null;
aa = function(){
!clickFun && (window.removeEventListener("click",clickFun,false));
clickFun = function(){
alert("1")
}
window.addEventListener("click",clickFun,false)
}
setInterval(function(){
aa()
},2000)
确保删除的是同一个内存的方法
addEventListener()与removeEventListener(),追加事件和删除追加事件的更多相关文章
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- (转)addEventListener()与removeEventListener()详解
转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...
- javascript -- addEventListener()和removeEventListener
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...
- addEventListener()和removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- addEventListener() 和 removeEventListener() 简介
DOM方法 addEventListener() 和 removeEventListener() 是用来分配和删除事件的函数 这两个方法都需要三个参数 分别为: 事件名称(String) ...
- 写一个addEventListener以及removeEventListener
第一步:对象属性赋值为函数,对象内部函数控制年龄这一参数变化,同时成长事件也执行. class Person{ constructor(){ this.name = ''; this.age = 0; ...
随机推荐
- WPF 创建用户控件并引用
项目源码地址:https://github.com/lizhiqiang0204/WpfControlLibrary.git 首先创建新项目->WPF用户控件库项目 在UserControl1. ...
- String,StringBuffer,StringBuild的区别
1.三者在执行速度方面的比较:StringBuilder > StringBuffer > String 2.String <(StringBuffer,StringBuild ...
- Anaconda安装tensorflow遇到的问题(转)
tensorflow安装教程 1.找不到Anaconda Prompt 其他教程中说AnacondaPrompt在安装的Anaconda文件夹下面(如D:/Anaconda),但是我在安装中没有找到, ...
- 跳一跳的Python环境搭建
微信最新的小程序里面出了个叫“跳一跳”的小游戏,一经推出立马刷爆了朋友圈,而一些大神们也通过Python实现了自动玩游戏具体代码见(Github地址:https://github.com/wangsh ...
- 简洁又快速地处理集合——Java8 Stream(下)
上一篇文章我讲解 Stream 流的基本原理,以及它与集合的区别关系,讲了那么多抽象的,本篇文章我们开始实战,讲解流的各个方法以及各种操作 没有看过上篇文章的可以先点击进去学习一下 简洁又快速地处理集 ...
- MySQL多线程数据导入导出工具Mydumper
http://afei2.sinaapp.com/?p=456 今天在线上使用mysqldump将数据表从一个库导入到另外一个库,结果速度特别慢,印象中有个多线程的数据导入导出工具Mydumper,于 ...
- SQL优化的思路及基本原则(mysql)
SQL优化的思路: 1.优化更需要优化的sql: 2.定位优化对象的性能瓶颈:优化前需了解查询的瓶颈是IO还是CPU,可通过PROFILING很容易定位查询的瓶颈. 3.明确优化目标: 4.从 ...
- spring的启动过程就是创建ioc容器的过程
1. spring简介 spring的最基本的功能就是创建对象及管理这些对象之间的依赖关系,实现低耦合.高内聚.还提供像通用日志记录.性能统计.安全控制.异常处理等面向切面的能力,还能帮我们管理最头疼 ...
- iOS富文本(一)属性化字符串
概述 iOS一些复杂的文本布局一般都是由底层的Core Text来实现的,直到iOS7苹果发布了Text Kit框架,Text Kit能够很简单实现一些复杂的文本样式以及布局,而Text Kit富文本 ...
- Android APP漏洞挖掘
0x00 1.组件公开安全漏洞 參考Android 组件安全. 2.Content Provider文件文件夹遍历漏洞 參考Content Provider文件文件夹遍历漏洞浅析. 3.Android ...