addEventListener()和removeEventListener()追加事件和删除追加事件
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()追加事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
现在有需求将亿元之内的阿拉伯数字转换成中文,例如：1234转换后变为一千二百三十四再转换成壹仟贰佰叁拾肆,所以本文给大家介绍了用JavaScript实现将阿拉伯数字转换成中文大写,感兴趣的小伙伴跟着小编一起来看看吧2024-05-05
这篇文章主要介绍了JS常见错误(Error)及处理方案详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
今天小编就为大家分享一篇Layui给switch添加响应事件的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
这篇文章主要介绍了微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
在线编码查询工具,编码查询,HTML编码2010-10-10
JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。2010-05-05
这篇文章主要介绍了微信小程序 点击控件后选中其它反选实例详解的相关资料,需要的朋友可以参考下2017-02-02
理解javascript函数式编程中的闭包（closure）
这篇文章主要帮助大家理解javascript函数式编程中的闭包（closure）概念，通俗地讲， JavaScript 中每个的函数都是一个闭包，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
去重是开发中经常会碰到的一个热点问题，这篇文章主要介绍了JS中实现数组去重中常用的5个方法，文中的示例代码讲解详细，感兴趣的可以了解一下2022-06-06
最新评论