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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jquery自定义表格样式
Nov 23 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
Javascript原型链及instanceof原理详解
May 25 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
小程序实现多列选择器
2019/02/15 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python封装对象实现时间效果
2020/04/23 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Django model select的多种用法详解
2019/07/16 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python selenium自动化测试模型图解
2020/04/15 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
模具毕业生推荐信
2014/02/15 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
暑期培训心得体会
2014/09/02 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
资产运营委托书范本
2014/10/16 职场文书
《大禹治水》教学反思
2016/02/22 职场文书