不能移除监听的问题

Question

点击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>

Answer 1

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>

Answer 2

注意 removeEventListener 的第二个参数， 这个参数就是要被移除的 function ，你这里传入的是一个新的 function ，而并不是原来 add 进去的 function() { alert(1) }， 也就是说，你必须把 function() { alert(1) } 设置到外部来获得函数句柄（ abc = function() { alert(1) } ），这样才能在 removeEventListener 中移除它 （ removeEventListener('click', abc) ）

Answer 3

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);