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实现，在全局范围的javascript变量中存储arguments.callee值，并将此值作为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 });之类的匿名函数无效。

removeEventListener和带参数的匿名函数

2 个答案: