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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
javascript编程起步(第七课)
Feb 27 Javascript
jquery 模板的应用示例
Nov 12 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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检测useragent版本示例
2014/03/24 PHP
php中动态调用函数的方法
2015/03/16 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JS delegate与live浅析
2013/12/21 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
django 消息框架 message使用详解
2019/07/22 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python程序需要编译吗
2020/06/19 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
学校献爱心活动总结
2014/07/08 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
大学毕业生自我评价
2015/03/02 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python