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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
js中null与空字符串""的区别讲解
Jan 17 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
python基础教程之循环介绍
2014/08/29 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python中setuptools的作用是什么
2020/06/19 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
软件测试常见笔试题
2012/02/04 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
商务邀请函
2015/01/30 职场文书
国庆庆典邀请函
2015/02/02 职场文书
团结友爱主题班会
2015/08/13 职场文书
争做文明公民倡议书
2019/06/24 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫