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 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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
多重?l件?合查?(一)
2006/10/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP中header用法小结
2016/05/23 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
python中文编码问题小结
2014/09/28 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
学生会离职感言
2014/02/11 职场文书
节约用水的口号
2014/06/20 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python