Removing an Anonymous Event 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.

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.

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.

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

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

How do you remove an event listener that uses an anonymous function for passing parameters?

You can create an object, whose properties are the temp values, and whose values are myOnClickFunction bound to that temp. For example:

const boundFns = {};
// acquire temp somehow
const boundFn = () => myOnClickFunction(temp);
boundFns[temp] = boundFn;
item.addEventListener("click", boundFn);

Then, when you need to remove the listener, retrieve the appropriate bound function:

item.removeEventListener("click", boundFns[temp]);

If a temp may be used more than once, check if it exists in boundFns first:

const boundFns = {};
// acquire temp somehow
if (!boundFns[temp]) {
  boundFns[temp] = () => myOnClickFunction(temp);
}
const boundFn = boundFns[temp];
boundFns[temp] = boundFn;
item.addEventListener("click", boundFn);

If temp cannot be be used reliably as a unique object key (for example, if it's an HTMLElement), you can use a Map instead, which is like an object, but whose keys can be anything, not just strings:

const boundFns = new Map();
boundFns.set(temp, boundFn);
// ...
item.removeEventListener("click", boundFns.get(temp));

Removing event listener when using inline anonymous function

You can store the function somewhere, so you can reference it later when removing.
Using an array, you can store multiple event handlers without them being overwritten by several calls to the adder function, and then have a function that removes all of them etc, something like :

function eventCall(t, num) {
  var clickedBox = t.style.backgroundColor;
}

var fns = [];

function adder(colorBox, num) {
  function fn() {
    eventCall(this, num);
  }

  colorBox.addEventListener('click', fn);

  fns.push(fn);
}

function remover(colorBox) {
  fns.forEach(function(fn) {
    colorBox.removeEventListener('click', fn);
  });
}

How to remove an anonymous event listener?

Lua has no such thing as "remove event listener". This is handled by libraries/frameworks that use event listeners, in your case Corona. I have no experience with Corona, but have you looked at removeEventListener() documentation?

It seems you just need to save the reference to your listener to be able to remove it later. That is, instead of doing this:

Runtime:addEventListener( "enterFrame", function() ... end )
-- cannot remove the listener, because you have no reference to it

Do this:

-- store a reference to your listener, so that you can remove it
-- equivalent to: local handler; handler = function() ... end
local function handler() Runtime:removeEventListener("enterFrame", handler) end
Runtime:addEventListener( "enterFrame", handler )

---

Related Topics