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()追加事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
大家都知道jquery在我们日常开发中的使用频率非常高，但jquery说到底还是对js的封装，我们不能光会使用，只有知道了其中的远离才能更好的使用，所以这篇文章主要介绍的是原生js仿jquery实现对Ajax封装的方法。2016-10-10
这篇文章主要给大家介绍了关于express异步函数异常捕获的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家详细介绍了JavaScript实现移动端轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript截取、切割字符串的技巧,文中给大家提到了substr 和 substring方法的区别，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2016-01-01
本篇文章主要介绍了two.js之实现动画效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家详细介绍了JavaScript实现网页版五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了javascript关于继承的用法,实例汇总了常见的javascript关于继承的用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
今天小编就为大家分享一篇layui数据表格重载实现往后台传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
IE不管设置div的高度与否，都会根据内容来自适应高度。但是FIrefox就没有这么聪明了。2009-04-04
通过event对象的fromElement属性解决热区设置主实体的一个bug
后台的热区管理中，如果鼠标移到热区上，会显示一个提示框，提示框里“设为主实体”、“删除”和“合并”等超链接，点击这些超链接可以进行各种操作。2008-12-12
最新评论