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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
微信小程序选择图片控件
Jan 19 Javascript
详解JS数组方法
Nov 20 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 生成WML页面方法详解
2009/08/09 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
js实现计算器功能
2020/08/10 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python简明入门教程
2015/08/04 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
初二生物教学反思
2014/02/03 职场文书
创业资金计划书
2014/02/06 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
服务标语大全
2014/06/18 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
团结主题班会
2015/08/13 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
社区宣传标语口号
2015/12/26 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书