Ich habe ein Objekt, das Methoden enthält. Diese Methoden werden innerhalb einer anonymen Funktion in das Objekt eingefügt. Es sieht aus wie das:

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});  

(Es gibt viel mehr Code, aber dies reicht aus, um das Problem aufzuzeigen.)

Jetzt möchte ich den Ereignis-Listener in einigen Fällen stoppen. Daher versuche ich, einen removeEventListener zu erstellen, kann aber nicht herausfinden, wie das geht. Ich habe in anderen Fragen gelesen, dass es nicht möglich ist, removeEventListener für anonyme Funktionen aufzurufen, aber ist dies auch in dieser Situation der Fall?

Ich habe eine Methode in t innerhalb der anonymen Funktion erstellt und dachte daher, dass dies möglich ist. Sieht aus wie das:

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

Warum kann ich das nicht tun?

Gibt es einen anderen (guten) Weg, dies zu tun?

Bonusinfo; Dies muss nur in Safari funktionieren, daher die fehlende IE-Unterstützung.

Ich glaube, das ist der Punkt einer anonymen Funktion, es fehlt ein Name oder eine Möglichkeit, darauf zu verweisen.

Wenn ich Sie wäre, würde ich einfach eine benannte Funktion erstellen oder sie in eine Variable einfügen, damit Sie einen Verweis darauf haben.

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

Sie können es dann durch entfernen

window.document.removeEventListener("keydown", handler);   

Wenn Sie sich innerhalb der eigentlichen Funktion befinden, können Sie argument.callee als Referenz auf die Funktion verwenden. wie in:

button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});

BEARBEITEN: Dies funktioniert nicht, wenn Sie im strengen Modus arbeiten ( "use strict";)

Eine Version von Otto Nascarellas Lösung, die im strengen Modus funktioniert, ist:

button.addEventListener('click', function handler() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', handler);
});

window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));  

Kann mehrere anonyme Funktionen sein, Keydown 1

Warnung: Funktioniert nur in Chrome Dev Tools& kann nicht in Code : Link verwendet werden

In modernen Browsern können Sie Folgendes tun ...

button.addEventListener( 'click', () => {
    alert( 'only once!' );
}, { once: true } );

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Eine nicht so anonyme Option

element.funky = function() {
    console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);

Seit ich Feedback von Andy erhalten habe ( ganz richtig, aber wie bei vielen Beispielen wollte ich eine kontextbezogene Erweiterung der Idee zeigen ), ist hier eine weniger komplizierte Darstellung:

<script id="konami" type="text/javascript" async>
    var konami = {
        ptrn: "38,38,40,40,37,39,37,39,66,65",
        kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
    };
    document.body.addEventListener( "keyup", function knm ( evt ) {
        konami.kl = konami.kl.slice( -9 );
        konami.kl.push( evt.keyCode );
        if ( konami.ptrn === konami.kl.join() ) {
            evt.target.removeEventListener( "keyup", knm, false );

            /* Although at this point we wish to remove a listener
               we could easily have had multiple "keyup" listeners
               each triggering different functions, so we MUST
               say which function we no longer wish to trigger
               rather than which listener we wish to remove.

               Normal scoping will apply to where we can mention this function
               and thus, where we can remove the listener set to trigger it. */

            document.body.classList.add( "konami" );
        }
    }, false );
    document.body.removeChild( document.getElementById( "konami" ) );
</script>

Dies ermöglicht eine effektiv anonyme Funktionsstruktur, vermeidet die Verwendung des praktisch veralteten Angerufenen und ermöglicht ein einfaches Entfernen.

Übrigens : Das Entfernen des Skriptelements unmittelbar nach dem Einstellen des Listeners ist ein niedlicher Trick, um Code zu verbergen, den man bevorzugen würde, war für neugierige Blicke nicht ganz offensichtlich ( würde die Überraschung verderben ;-)

Die Methode ( einfacher ) lautet also:

element.addEventListener( action, function name () {
    doSomething();
    element.removeEventListener( action, name, capture );
}, capture );

Dies ist nicht ideal, da es alle entfernt, aber möglicherweise für Ihre Anforderungen funktioniert:

z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);

Durch das Klonen eines Knotens werden alle seine Attribute und ihre Werte kopiert, einschließlich der intrinsischen (Inline-) Listener. Es werden keine Ereignis-Listener kopiert, die mit addEventListener () hinzugefügt wurden.

Node.cloneNode ()

JavaScript : Die Methode addEventListener registriert den angegebenen Listener in dem EventTarget (Element | Dokument | Fenster), auf dem sie aufgerufen wird.

EventTarget. addEventListener ( event_type , handler_function, Bubbling | Capturing );

Maus, Tastatur Ereignisse Beispiel Tests in WebConsole:

var keyboard = function(e) {
    console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
    var element = e.srcElement || e.target;
    var tagName = element.tagName || element.relatedTarget;
    console.log('Mouse Over TagName : ' + tagName);    
};
var  mouseComplex = function(e) {
    console.log('Mouse Click Code : ' + e.button);
} 

window.document.addEventListener('keydown',   keyboard,      false);
window.document.addEventListener('mouseover', mouseSimple,   false);
window.document.addEventListener('click',     mouseComplex,  false);

removeEventListener- Methode entfernt den zuvor bei EventTarget.addEventListener () registrierten Ereignis-Listener.

window.document.removeEventListener('keydown',   keyboard,     false);
window.document.removeEventListener('mouseover', mouseSimple,  false);
window.document.removeEventListener('click',     mouseComplex, false);

kann ich benutzen

Um dies auf den neuesten Stand zu bringen:

//one-time fire
element.addEventListener('mousedown', {
  handleEvent: function (evt) {
    element.removeEventListener(evt.type, this, false);
  }
}, false);

Ich bin auf dasselbe Problem gestoßen und dies war die beste Lösung, die ich bekommen konnte:

/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
    /*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;

Bitte denken Sie daran, dass ich dies nur für das windowElement und für die 'mousemove'Veranstaltung getestet habe , daher kann es bei diesem Ansatz zu Problemen kommen.

Möglicherweise nicht die beste Lösung in Bezug auf das, was Sie fragen. Ich habe immer noch keine effiziente Methode zum Entfernen anonymer Funktionen festgelegt, die im Einklang mit dem Aufruf des Ereignis-Listeners deklariert wurden.

Ich persönlich verwende eine Variable, um die <target>Funktion außerhalb des Aufrufs des Ereignis-Listeners zu speichern und zu deklarieren, z.

const target = document.querySelector('<identifier>');

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

So entfernen Sie den Listener:

target.removeEventListener('click', myFunc);

Nicht die beste Empfehlung, die Sie erhalten, aber um anonyme Funktionen zu entfernen, ist die einzige Lösung, die ich als nützlich empfunden habe, das HTML-Element zu entfernen und dann zu ersetzen. Ich bin sicher, dass es eine bessere Vanille-JS-Methode geben muss, aber ich habe sie noch nicht gesehen.

Ich weiß, dass dies ein ziemlich alter Thread ist, dachte aber, ich könnte meine zwei Cent für diejenigen einsetzen, die ihn nützlich finden.

Das Skript (Entschuldigung für die unkreativen Methodennamen):

window.Listener = {
    _Active: [],
    remove: function(attached, on, callback, capture){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            if(current[0] === attached && current[1] === on && current[2] === callback){
                attached.removeEventListener(on, callback, (capture || false));
                return this._Active.splice(i, 1);
            }
        }
    }, removeAtIndex(i){
        if(this._Active[i]){
            var remove = this._Active[i];
            var attached = remove[0], on = remove[1], callback = remove[2];
            attached.removeEventListener(on, callback, false);
            return this._Active.splice(i, 1);
        }
    }, purge: function(){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            current[0].removeEventListener(current[1], current[2]);
            this._Active.splice(i, 1);
        }
    }, declare: function(attached, on, callback, capture){
        attached.addEventListener(on, callback, (capture || false));
        if(this._Active.push([attached, on, callback])){
            return this._Active.length - 1;
        }
    }
};

Und Sie können es so verwenden:

// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
    // on click, remove the listener and log the clicked element
    console.log(e.target);
    Listener.removeAtIndex(clickListener);
});

// completely remove all active listeners 
// (at least, ones declared via the Listener object)
Listener.purge();

// works exactly like removeEventListener
Listener.remove(element, on, callback);

window.document.onkeydown = function(){};