addEventListener()和removeEventListener()追加事件和删除追加事件


Posted in Javascript onDecember 04, 2020

addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为false;

要在按钮上为click事件添加事件处理程序,可以使用下列代码:

1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function () {
3  alert(this.id);
4 }, 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()追加事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
原生JS实现拖拽效果
Dec 04 #Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
JS如何监听div的resize事件详解
Dec 03 #Javascript
JavaScript十大取整方法实例教程
Dec 03 #Javascript
js实现圆形菜单选择器
Dec 03 #Javascript
You might like
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python使用zip将list转为json的方法
2018/12/31 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
保密承诺书范文
2014/03/27 职场文书
大学生就业自荐书
2014/06/16 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
大连星海广场导游词
2015/02/10 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS