JavaScript: remove an event listener from within that listener?

问题

I always wondered how clean is such approach - to remove an event listener from within that very listener.

UPDATE:

Internally I keep a hash of objects and listeners, so I potentially can remove event listener from any place. I'm just concerned of removing it from within itself. Will such action do a job actually?

UPDATE

I'm asking about addEventListener, removeEventListener stuff.

回答1:

You can pass the once option to have a listener act only once, then remove 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 });

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

回答2:

I just saw this because i wondered the exact same question!

arguments.callee is your friend...

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

so you'd have

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

this works in Titanium Appcelerator, so it should work in javascript too (because they are The Same Thing Kinda)

NB do NOT add () to the end of arguments.callee in this example, unless you like seeing... bah dum tish!.

In fact, if you don't want to use arguments.callee, this also might work (untested):

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

Where "anythingYouWantHere" is any variable name you'd like ~ you're effectively "naming" the function as you add it.

回答3:

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 it works great :)

回答4:

You could try something like this, depending on how it's called:

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

Or is it event listeners you're concerned with? Because those are a little bit more complicated.

回答5:

@bharal 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);
},

回答6:

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

I don't have much experience with other frameworks, but I'd imagine they offer similar functionality. If you're not using a framework at all, @sdleihssirhc has an acceptable answer.

EDIT: Ah, perhaps you're looking for something more like addEventListener() and removeEventListener(). Again, a framework will offer some convenience to your interactions and save you the trouble of reinventing the wheel in some cases.

来源：https://stackoverflow.com/questions/4936324/javascript-remove-an-event-listener-from-within-that-listener

标签

javascript

garbage-collection

dom-events