点击test2后再点击test1还是会弹出“1”
为什么点击test2不能移除test1的监听呢?
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
<script>
document.querySelector(".test1").addEventListener('click',function(){
alert(1)
},false);
document.querySelector(".test2").addEventListener('click',function(){
document.querySelector(".test1").removeEventListener('click',function(){
},false);
},false);
</script>
注意 removeEventListener 的第二个参数, 这个参数就是要被移除的 function ,你这里传入的是一个新的 function ,而并不是原来 add 进去的 function() { alert(1) }, 也就是说,你必须把 function() { alert(1) } 设置到外部来获得函数句柄( abc = function() { alert(1) } ),这样才能在 removeEventListener 中移除它 ( removeEventListener('click', abc) )
target.removeEventListener(type, listener[, useCapture])
第二个参数要指定需要被移除的函数, 你重新声明了一个function 怎么移除呢?
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
<script>
var func = function(){
alert(1)
};
document.querySelector(".test1").addEventListener('click',func,false);
document.querySelector(".test2").addEventListener('click',function(){
document.querySelector(".test1").removeEventListener('click',func,false);
},false);
</script>
remove
的时候要 remove
同一个才可以。
function(){
alert(1)
}
和
function(){
}
和
function(){
}
是完全不同的3个函数,就算字面上看起来一样,也是不同的函数
function test1Handler(){
alert(1);
}
document.querySelector(".test1").addEventListener('click', test1Handler, false);
document.querySelector(".test2").addEventListener('click', function(){
document.querySelector(".test1").removeEventListener('click', test1Handler, false);
}, false);