CODEWITHSUNDEEP
javascriptdom-events
totoaussi
totoaussi

Reputation: 735

removeEventListener and anonymous function with arguments

I have a text input where I add a event listener. This event listener execute a anonymous function by onkeyup. This anonymous function contains a foo function. This foo function have an argument number for displaying number in console.

And I have a button for removing the event listener added. But when I click this button and type in the text input, the event listener is not removed, so the foo function displays number again in the console.

Here is the code, very simple :

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

You can try it :https://jsfiddle.net/5LtmLzqy/

Have you an idea?

Upvotes: 2

Views: 5418

Answers (2)

Sudipta Kumar Maiti
Sudipta Kumar Maiti

Reputation: 1709

It can be achieved through arguments.callee, store value of arguments.callee in a globally scoped javascript variable and pass this value as an argument of 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);
    }

Upvotes: 3

Niki van Stein
Niki van Stein

Reputation: 10734

Just make your function an external function.

From 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.

Upvotes: 1

Related Questions