The arrow functions are often used, especially as event handlers.
The this of the arrow functions are ones of the contexts containing the arrow function definitions.
This means it's not needed to bind this explicitly.
For this reason, many arrow functions are used when writing classes, however, arrow functinos are little bit difficult to call removeEventHandler.
The most common method is name the arrow function by assining it to some member variable, and use that variable at removing the handler.
document.getElementById("hoge").addEventListener("click", this.foo = ev => { ... });
...
document.getElementById("hoge").removeEventListener("click", this.foo);
This make the code more longer, it was already long enough when addEventHandler is used with getElementById, and you need to create independent variables for each handler.
Basically, calling removeEventListener needs the same parameters when you have called addEventListener, and this annoys you enough.
Searching the internet, there are the metods like creating the handler registering function and this function remembers the parameters for removing, and bind some key and returns it. At removing the handler, you just pass this key to the handler removing function, the function bring out the parameters from this key, and removes the handler appropriately. This makes easy to remove handlers, but you still remember the keys.
Thinking well, the parameters for removing are easily got just after adding the handler, though it's quite natural.
That is, it is easy to call removeEventListener at this point.
It means if you remember the calling removeEventHandler itself into some variable, the parameters are not needed to remember, as follows.
let fn;
document.getElementById("hoge").addEventListener("click", fn = ev => { ... });
this.remover = () => document.getElementById("hoge").removeEventListener("click", fn);
...
this.remover();
This can be written as the function.
function addHandler(elem, ev, fn) {
elem.addEventListener(ev, fn);
return () => elem.removeEventListener(ev, fn);
}
this.remover = addHandler(document.getElementById("hoge"), "click", ev => { ... });
...
this.remover();
Some events are registered at same time.
For instance, registering and removing pointerdown, pointermove, pointerup, and pointercancel at same time is maybe quite common.
addHandler is a function, it can be written as the elements of the array.
let hoge = document.getElementById("hoge");
this.removers = [
addHandler(hoge, "pointerdown", ev => { ... }),
addHandler(hoge, "pointermove", ev => { ... }),
addHandler(hoge, "pointerup", ev => { ... }),
addHandler(hoge, "pointercancel", ev => { ... }),
];
If you do so, removing is done by the primitive for loop.
for (let r of this.removers) r();
Although it is reinventing of the wheel, I think...
23 Apr 2022: First written
Copyright (C) 2022 akamoz.jp
$Id: js-remove-listener-en.htm,v 1.3 2022/04/23 04:18:06 you Exp $