Removeeventlistener on Anonymous Functions in JavaScript

removeEventListener on anonymous functions in JavaScript

I believe that is the point of an anonymous function, it lacks a name or a way to reference it.

If I were you I would just create a named function, or put it in a variable so you have a reference to it.

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

You can then remove it by

window.document.removeEventListener("keydown", handler);   

Remove event listener with an anonymous function with a local scope variable

Yair Cohen's answer has the right idea, but it's missing something. addEventListener requires a function reference and not a function call. In his code, onStepIndex will get executed once and then never again.

To create a function reference and be able to feed it parameters and be able to remove the event listener later, you could use the concept called currying.

const onStepIndex = function(stepIndex) {
    return function actualOnStepIndex(event) {
        console.log(event);
        console.log(stepIndex);
    }
}
const handlers = [];

const startSelectNode = (stepIndex) => {
  document.addEventListener("click", handlers[stepIndex] = onStepIndex(stepIndex), true);
};

const stopSelectNode = (stepIndex) => {
  document.removeEventListener("click", handlers[stepIndex], true);
};

startSelectNode(1); // This adds the event listener  for stepIndex = 1
stopSelectNode(1); // This removes the event listener for stepIndex = 1

Basically, by calling onStepIndex you return the actual function, which is now the event handler. We saved the reference to the function in the handlers array and we need that reference if we later want to call removeEventListener.

Javascript removeEventListener not doing anything with anonymous function, no easy way to do this?

.removeEventListener() takes the same callback function as a second argument that was used to add the event listener, i.e. that was passed as a second argument to .addEventListener() method.

In your case, you are using anonymous function, so the one you pass to .addEventListener() method is different from the callback function that you have passed to .removeEventListener() method. Hence, registered event listeners are not removed.

Since you mentioned in your question that you used anonymous functions because you need to pass an argument to the event handler function. You can create a function that you want to use as a event handler, then use Function.prototype.bind() to get another function, save a reference to this function returned by Function.prototype.bind() somewhere and then use this new function as a event handler.

Later, when you need to remove the event listeners, you can remove them easily because references of the event handler functions were already saved.

Following code snippet shows an example:

const btn = document.querySelector('#one');
const removeBtn = document.querySelector('#two');

function handleClick(val) {
  console.log(val);
}

// 123 is the argument that we want to pass to the event handler
const bindFunc = handleClick.bind(null, 123);

btn.addEventListener('click', bindFunc);

removeBtn.addEventListener('click', () => {
  btn.removeEventListener('click', bindFunc)
});

<button id="one">Click</button>
<button id="two">Remove Click Listener</button>

How can I remove an event listener that's an anonymous function?

You can't do it with an anonymous function. You have to have a reference to the listener function.

Regarding your issues with having this undefined -- this is a common problem in JS and it's worth googling a bit. You can either use bind and store the result in a variable, or use arrow functions if you have them.

How to remove event listener that does not directly call a function?

You need a reference to the function you want to remove.

If you don't keep a reference to it, you can't remove it.

Keep a reference to it.

const listener = event => { ... };
foo.addEventListener("click", listener);
foo.removeEventListener("click", listener);

Removing an anonymous event listener

There is no way to cleanly remove an event handler unless you stored a reference to the event handler at creation.

I will generally add these to the main object on that page, then you can iterate and cleanly dispose of them when done with that object.

removeEventListener and anonymous function with arguments

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.

---

Related Topics