removeEventListener 和带参数的匿名函数

removeEventListener and anonymous function with arguments

我有一个文本输入,我在其中添加了一个事件侦听器。 此事件侦听器通过 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/

你有想法吗?在此先感谢您。

只需将您的函数设为外部函数即可。

来自w3schools

Note: To remove event handlers, the function specified with the addEventListener() method must be an external function, like in the example above (myFunction).

Anonymous functions, like element.removeEventListener("event", function(){ myScript }); will not work.

可以通过 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);
    }