removeEventListener和帶參數的匿名函數

Question

我有一個文本輸入，我添加了一個事件監聽器。 此事件偵聽器通過onkeyup執行匿名函數。 這個匿名函數包含一個foo函數。 這個foo函數有一個參數number用於在控制檯中顯示數字。

而且我有一個按鈕用於刪除添加的事件偵聽器。 但是，當我點擊這個按鈕並輸入文本輸入時，事件偵聽器不會被刪除，所以foo函數會在控制檯中再次顯示數字。

這裏的代碼，很簡單：

<input type="text" value="" id="input_text"> 

<input type="button" value="Remove Event Listener" onclick="deleteEventListener();"> 

<script type="text/javascript"> 

number = 0; 

//Function to display number in console : 
function foo(arg_number) 
{ 
    number = arg_number+1; 

    console.log(number);  
} 

//The text input : 
input_text = document.getElementById("input_text"); 

//Add event listener to the text input : 
input_text.addEventListener("keyup", function(){foo(number);}, false); 

//Function to remove event listener : 
function deleteEventListener() 
{ 
    input_text.removeEventListener("keyup", function(){foo(number);}, false); 
} 

，您可以嘗試：https://jsfiddle.net/5LtmLzqy/

你有一個想法？預先感謝你，親切。

Answer 1

只需使您的功能成爲外部功能即可。

從w3schools：

注意：要移除事件處理程序，與addEventListener（）方法中指定的功能必須是一個外部的功能，如在上述（myFunction的）的例子。

匿名函數，如element.removeEventListener("event", function(){ myScript });將不起作用。在一個全球arguments.callee

Answer 2

它可以通過arguments.callee來實現，存儲值作用域JavaScript變量，並通過該值作爲removeEventListener()參數。

number = 0; 
    var myAnonymous = null; 
    //Function to display number in console : 
    function foo(arg_number) { 
     number = arg_number + 1; 
     console.log(number); 
    } 

    //The text input : 
    input_text = document.getElementById("input_text"); 

    //Add event listener to the text input : 
    input_text.addEventListener("keyup", function() { myAnonymous = arguments.callee; foo(number); }, false); 

    //Function to remove event listener : 
    function deleteEventListener() { 
     if (myAnonymous != null) 
      input_text.removeEventListener("keyup", myAnonymous); 
    }