问题:在使用addEventListener时会遇到监听的方法执行多次,是因为addEventListener重复添加事件监听时,不能替换之前的监听,导致有多个监听同时存在
解决:
关键点,创建一个公共的全局变量用于控制重复事件的发生
例子:
<script>
var delFunc = null;//定义全局变量
function test(){
//使用for循环模拟多次添加监听场景
for(var i = 0; i < 10; i++){
//此处为关键点:如果这个全局变量不为空,说明当前已经绑定了一个监听,所以需要移除
if(delFunc != null){
document.getElementById("testBut").removeEventListener("click", delFunc);
}
//此处给该公共参数重新赋值方法
delFunc = function () {
console.log('监听执行方法');
};
//添加监听,此时添加监听不会出现重复监听的情况
document.getElementById("testBut").addEventListener("click", delFunc);
}
}
</script>