[Javascript] How to removeEventListener that is addEventListener with anonymous function?


Answers

You can't, you need a reference to the function:

function doSomethingWith(param) {
   var fn = function(){ document.write(param); };
   document.body.addEventListener('scroll', fn, false);
   setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');
Question
function doSomethingWith(param)
{
    document.body.addEventListener(
        'scroll',
        function()
        {
            document.write(param);
        },
        false
    ); // An event that I want to remove later
}
setTimeout(
    function()
    {
        document.body.removeEventListener('scroll', HANDLER ,false);
            // What HANDLER should I specify to remove the anonymous handler above?
    },
    3000
);
doSomethingWith('Test. ');



var body =
        document.querySelector('body'),
    clickTarget =
        document.getElementById('click-target'),
    mouseOverTarget =
        document.getElementById('mouse-over-target'),
    toggle = false;

function makeBackgroundYellow() {
    'use strict';

    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }

    toggle = !toggle;
}

clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);

mouseOverTarget.addEventListener('mouseover', function () {
    'use strict';

    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});


target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

the second argument is the eventlistener you want to remove, see this




Javascript unbind Anonymous callback Function

No. Because those to anonymouse functions are actually different. It is the same reason why { a: 1 } === { a: 1 } returns false.

You need to do the following:

var func = function () { ... };

element.addEventListener( 'click', func, false );

element.removeEventListener( 'click', func, false );






remove event listener on a input in pure javascript

The second argument needs to be the event listener you want to remove (so you need to keep a reference to that function around instead of putting a function expression directly as the argument to addEventListener).

You're passing it a brand new function. It doesn't get removed, because that function wasn't listening in the first place.

var in = document.getElementById("myInput");

function myListener (event) {
    console.log(in.value);
}

in.addEventListener("keyup", myListener);
in.removeEventListener("keyup", myListener);



Functions are identified by pointer. You have no pointer to your anonymous function, so you have nothing to pass to remove() to tell it which function to remove.

Simply passing a duplicate function doesn't do it, because the duplicate has a different pointer.

You need to stick with assigning the function to a variable, then passing that variable to remove().