RemoveEventListener of javaScript anonymous function
How can I remove this event listener I tried but below code and it is not a seam to expose any fruit
class Tag {
constructor(name){
this.tag = document.createElement(name);
}
removeEvent(e,func){
this.tag.removeEventListener(e,func,false);
}
addEvent(e,func) {
this.tag.addEventListener(e,func,false);
}
}
let tag = new Tag();
tag.addEvent('click',(e)=> {
console.log('something');
});
How do I get removeEvent to work? please help me specifically need how to reference the anonymous function since this works.
function handler(e){
// code for event
}
tag.addEventListener('click',handler,false);
tag.removeEventlistener('click',handler,false);
I tried to add
removeEvent(e,func) {
func.ref = function (){
return arguments.callee;
}
this.tag.removeEventListener(e,func.ref,false);
}
It just doesn't work, we will now refer to func.ref as a function reference;
source to share
Anonymous functions cannot be removed as they are not stored with an identifier available to your code. This is why they call them "anonymous" and that one of the proponents of their use. The other downside is not being able to write unit tests directly for them. The surface of them is that because they are not saved, little memory is saved. Also, JavaScript, being a functional programming language, makes it easy to pass anonymous functions as data (although you can certainly pass named functions).
source to share
Unfortunately, there is no way to remove anonymous functions hooked up as listeners.
You can use a small temporary store each time you execute functions and track all events, and then use "cached" event listeners to retrieve and detach events.
Here's an example example:
var events = [];
function storeEvent(id, fn, useCaptureMode, event) {
var e = findStoredEvent(id, event, useCaptureMode);
if (!e) {
events.push({id, fn, useCaptureMode, event});
}
}
function findStoredEvent(id, event, useCaptureMode) {
return events.find(el => el.id === id && el.event === event && el.useCaptureMode === el.useCaptureMode);
}
document.getElementById("test").addEventListener('click', function() {
storeEvent(this.id, arguments.callee, false, 'click');
console.log('test');
}, false);
function detachEvent() {
var e = findStoredEvent('test', 'click', false);
if (e) {
document.getElementById("test").removeEventListener(e.event, e.fn, e.useCaptureMode);
events.splice(events.findIndex(el => el === e), 1);
}
}
<button id="test">
Test
</button>
<button id="remove" onclick="detachEvent()">
Remove Event
</button>
I hope this helps
source to share
I had the same problem in an extension I was writing. I solved this by adding a new listener that caught / stopped all propagation of the event before it reaches the listener / function I wanted to remove.
window.addEventListener(type, function (event) {
event.stopPropagation();
}, true);
source to share