无法删除我附加的事件监听器

Question

I have attached an event listener in a module using

document.addEventListener('keydown', () => this.clickCatcherFunction(target_id));

but when that function is executed, the line

document.removeEventListener("keydown", () => this.clickCatcherFunction());

doesn't remove the listener. Next time a key is pressed it executes the clickCatcherFunction and fails. How can I pass it the same function I used to create it to remove it?

other failed attempts:

document.removeEventListener("keydown", this.clickCatcherFunction());
document.removeEventListener("keydown", clickCatcherFunction());
document.removeEventListener("keydown", clickCatcherFunction);

Answer 1

Only named functions can be removed, not anonymous functions because even if you make an identical anonymous function, it won't be the exact same instance of the function you had previously added. You'll have to set up your function separately, like this:

function clickCather(evt){
  .  .  .
}

Then you can add and remove it with addEventListener("click", clickCatcher) and removeEventListener("click", clickCatcher); because you'll be referring to the same function instance in memory.

And, note that with both addEventListener and removeEventListener you don't invoke your function (no parenthesis at the end of the function name), you only want to refer to it.