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.
(Elem.setUserData('eventListener', function(e){console.log('Event fired.');}, null);
und führen Sie dann Elem.addEventListener ('event', Elem.getUserData ('eventListener'), false) aus. ... und das Gleiche gilt für removeEventListener. Hoffe du kannst das in Ordnung sehen.Antworten:
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.
Sie können es dann durch entfernen
quelle
this
Schlüsselwort kann verwirrend sein. Ein guter Ort, um sich darüber zu informieren,this
bezieht sich das auf das Element, zu dem der Listener hinzugefügt wird, nicht auf das Ereignis selbst (das der Parameter wäree
). Deshalbthis === e.currentTarget
. Lesen Sie developer.mozilla.org/en-US/docs/Web/API/EventTarget/…Wenn Sie sich innerhalb der eigentlichen Funktion befinden, können Sie argument.callee als Referenz auf die Funktion verwenden. wie in:
BEARBEITEN: Dies funktioniert nicht, wenn Sie im strengen Modus arbeiten (
"use strict";
)quelle
button.addEventListener('click', function handler() { this.removeEventListener('click', handler); });
Eine Version von Otto Nascarellas Lösung, die im strengen Modus funktioniert, ist:
quelle
Kann mehrere anonyme Funktionen sein, Keydown 1
Warnung: Funktioniert nur in
Chrome Dev Tools
& kann nicht in Code : Link verwendet werdenquelle
getEventListeners
scheint Teil der Chrome Dev-Tools zu sein, kann also nur für das Debuggen verwendet werden.In modernen Browsern können Sie Folgendes tun ...
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
quelle
Eine nicht so anonyme Option
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:
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:
quelle
Dies ist nicht ideal, da es alle entfernt, aber möglicherweise für Ihre Anforderungen funktioniert:
Node.cloneNode ()
quelle
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:
removeEventListener- Methode entfernt den zuvor bei EventTarget.addEventListener () registrierten Ereignis-Listener.
kann ich benutzen
quelle
Um dies auf den neuesten Stand zu bringen:
quelle
Ich bin auf dasselbe Problem gestoßen und dies war die beste Lösung, die ich bekommen konnte:
Bitte denken Sie daran, dass ich dies nur für das
window
Element und für die'mousemove'
Veranstaltung getestet habe , daher kann es bei diesem Ansatz zu Problemen kommen.quelle
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.
quelle
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):
Und Sie können es so verwenden:
quelle
quelle
addEventListener
.