removeEventListener für anonyme Funktionen in JavaScript

Ich habe ein Objekt mit Methoden. Diese Methoden werden in das Objekt innerhalb einer anonymen Funktion. Es sieht wie folgt aus:

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 eine Menge mehr code, aber das ist genug, um das problem anzuzeigen)

Nun will ich aufhören, den Ereignis-listener in einigen Fällen. Deshalb bin ich versucht zu tun, ein removeEventListener aber ich kann nicht herausfinden, wie dies zu tun. Ich habe gelesen in anderen Fragen, es ist nicht möglich, den Anruf removeEventListener auf anonyme Funktionen, aber ist dies auch der Fall in dieser situation?

Ich habe eine Methode in t erstellt, in der anonymen Funktion und daher dachte ich, es war möglich. Sieht wie folgt aus:

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

Warum kann ich nicht das tun?

Gibt es andere (gute) Möglichkeit, dies zu tun?

Bonus info; das hat nur zu funktionieren in Safari, daher die fehlende ie-Unterstützung.

InformationsquelleAutor der Frage bitkid | 2011-02-09

Ich glaube, dass ist der Punkt, der eine anonyme Funktion, es fehlt ein name oder ein Weg zu verweisen.

Wenn ich du wäre würde ich Sie einfach erstellen Sie eine benannte Funktion, oder legen Sie Sie in eine variable, so haben Sie einen Hinweis darauf.

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);

Können Sie dann entfernen Sie es, indem

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

InformationsquelleAutor der Antwort Adam Heath

83

wenn Sie innerhalb der eigentlichen Funktion, die Sie verwenden können, Argumente.angerufene als ein Verweis auf die Funktion. in:
```
button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});
```
EDIT:
Das wird nicht funktionieren, wenn Sie im strikten Modus ("use strict";)

InformationsquelleAutor der Antwort Otto Nascarella

Einer version von Otto Nascarella's Lösung, die funktioniert in der strict-Modus eingeschaltet ist:

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

InformationsquelleAutor der Antwort Melle

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

Kann mehrere anonyme Funktionen, keydown[1]

InformationsquelleAutor der Antwort user3519897

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);

Da das feedback von Andy (ganz in Ordnung, aber wie mit vielen Beispielen wollte ich zeigen, eine kontextbezogene Ausweitung der Idee), hier ist eine weniger kompliziert exposition:

<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 im Grunde anonyme Funktion, Struktur, vermeidet die Verwendung der praktisch veraltet angerufeneund ermöglicht die einfache Entfernung.

Übrigens: Das entfernen des script-Elements sofort nach Einstellung der Hörer ist ein netter trick für das ausblenden von code würde man lieber nicht unübersehbar zu neugierigen Augen (würde Euch die überraschung verderben 😉

Also die Methode (mehr einfach):

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

InformationsquelleAutor der Antwort Fred Gandt

JavaScript: addEventListener
- Methode registriert den angegebenen listener auf dem EventTarget(Element|Dokument|Fenster) es heißt auf.

EventTarget.addEventListener(event_typehandler_function, Bubbling|Capturing);

Maus, Tastatur Veranstaltungen Beispiel test in der 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 das Ereignis-listener registriert mit EventTarget.die Methode addEventListener().

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

caniuse

InformationsquelleAutor der Antwort Yash

Geben eine mehr up-to-date Ansatz:

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

InformationsquelleAutor der Antwort Jonatas Walker

0

Dies ist nicht ideal, da es löscht alle, aber die funktionieren könnte für Ihre Bedürfnisse:
```
z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);
```
Klonen eines Knoten kopiert alle Attribute und Ihre Werte, darunter
intrinsische (in–line) die Zuhörer. Es kopiert nicht-Ereignis-Listener Hinzugefügt werden
die Methode addEventListener()

Knoten.cloneNode()

InformationsquelleAutor der Antwort
0

Vielleicht nicht die beste Lösung in Bezug auf, was Sie Fragen. Ich habe noch nicht festgestellt, eine effiziente Methode zum entfernen von anonyme Funktion deklariert inline mit dem Ereignis-listener-Aufruf.

Ich persönlich benutze eine variable zum speichern der <target> und erklären die Funktion außerhalb des Ereignis-listener-Aufruf zB:

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

function myFunc(event) {
function code;
}

target.addEventListener('click', myFunc);

Dann an den listener entfernen:

target.removeEventListener('click', myFunc);

Nicht die top-Empfehlung, die Sie erhalten, aber zu entfernen, anonyme Funktionen die einzige Lösung, die ich gefunden habe, nützlich ist, entfernen, dann ersetzen Sie den HTML-element. Ich bin sicher, es muss einen besseren vanilla-JS-Methode, aber ich habe ihn noch nicht gesehen.

InformationsquelleAutor der Antwort Shay Connolly
0

Habe ich stolperte über das gleiche problem und das 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 halten Sie im Verstand ich habe nur getestet, für die window element und für die 'mousemove' Ereignis, so könnte es einige Probleme mit diesem Ansatz.

InformationsquelleAutor der Antwort Gark Garcia

-4

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

InformationsquelleAutor der Antwort Dun

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.