JavaScript: remove event listener from this listener?

Question

I always wondered how clean this approach is - to remove the event listener from this listener itself.

UPDATE:

Inside, I keep a hash of objects and listeners, so I can potentially remove the event listener from anywhere. I'm just interested in removing it from the inside. Will such actions really do the job?

UPDATE

I am asking about addEventListener, removeEventListener.

Answer 1

I only saw this because I was wondering exactly the same question!

arguments.callee your friend ...

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee

so you would

blah.addEventListener('click',function(e){ e.source.removeEventListener('click', arguments.callee); blee bloo bleep }); 

this works in the Titanium Appcelerator, so it should work in javascript too (because it is the same thing)

NB DO NOT add () to the end of arguments.callee in this example if you do not want to see ... bah dum tish! ,

In fact, if you do not want to use arguments.callee, this might also work (not verified):

 blah.addEventListener('click', anyThingYouWantHere : function(e){ e.source.removeEventListener('click', anyThingYouWantHere); blee bloo bleep }); 

Where "anyYouWantHere" is any variable name you want ~, you actually "call" the function as you add it.

Answer 2

You can try something like this, depending on what it's called:

 some_div.onclick = function () { ... this.onclick = null; // or: some_div.onclick = null; }; 

Or are they listeners of events you are worried about? Because they are a little more complicated.

Answer 3

You can pass the once option so that the listener acts only once, and then delete itself. Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Example:

  element.addEventListener('eventname', (ev) => { console.log("event is captured only once."); // do more stuff... }, { once: true }); 

By the same link above, modern browser support is good, but not available for Internet Explorer.

Answer 4

If you use jQuery, you will likely have several convenience methods for interacting with event handlers - see bind () / unbind (), delegate () / undelegate (), one (), and similar methods .

I do not have much experience working with other frameworks, but I would suggest that they offer similar functionality. If you don't use the framework at all, @sdleihssirhc has an acceptable answer.

EDIT: Or maybe you are looking for something like addEventListener () and removeEventListener () . Again, the structure will offer some convenience for your interactions and save you from having to reinvent the wheel in some cases.

Answer 5

I just made a wrapper function that generates a self-destructing event listener:

 let addSelfDestructingEventListener = (element, eventType, callback) => { let handler = () => { callback(); element.removeEventListener(eventType, handler); }; element.addEventListener(eventType, handler); }; 

So far, everything is working fine :)

Answer 6

@bharal's answer gave me now this solution:

 //example addBlurListener(element, field) { const listenToBlur = (e) => { e.target.removeEventListener(e.type, listenToBlur); //your stuff }; element.addEventListener('blur', listenToBlur); },