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

它可以通過實現arguments.callee ，的存儲值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);
    }

Answer 2

只需將您的函數設為外部函數即可。

從w3schools ：

注意：要刪除事件處理程序，用addEventListener（）方法指定的函數必須是外部函數，如上面的示例（myFunction）。

匿名函數，例如element.removeEventListener("event", function(){ myScript }); 不管用。