Benutzerdefinierte Ereignisse-Modell ohne mithilfe von DOM-Ereignisse in JavaScript
Ich bin neu in JavaScript und die Programmierung im Allgemeinen, und ich habe einige Fragen über Objekte und Ereignisse.
Sagen, ich habe ein Objekt:
var computer = {
keyboard: {}
}
Was ich Suche, ist ein Weg, um Ereignisse zu registrieren, um die Tastatur-Objekt:
computer.keyboard.registerEvent( "keyEscape" );
Auslösen des Ereignisses:
computer.keyboard.dispatchEvent( "keyEscape" );
Und anlegen von event-Handlern:
computer.keyboard.addEventListener( "keyEscape", function() {...} );
Ich wissen, wie das mit den DOM-Elemente, aber keine Objekte. Ist das etwas, das getan werden kann, die in JavaScript (vielleicht mit Hilfe von JQuery)?
Auch nur das geringste bisschen Beratung würde geschätzt werden, deutlich.
- Was ist der Anwendungsfall? Nicht-DOM-Objekte würde nicht reagieren auf Ereignisse wie Tastendrücke. Warum nicht "normale" Funktionen?
- Ich würde definieren keydown/keyup-event-Handler, und überprüfen Sie die esc-Taste
- Ich erstellte eine "HTML" vgui-panel in ein source-engine Spiel, und ich brauche eine pass-Taste gedrückt, um das Fenster (browser), wenn es nicht sichtbar ist. Der einzige Weg, dies zu tun ist durch den Aufruf Panel:RunJavaScript( "javascript" ), die führt den angegebenen javascript. Die erste Möglichkeit die ich mir vorstellen könnte, dies zu tun ist durch die Registrierung von Ereignissen durch RunJavaScript, und dann brennen Sie Sie auf die gleiche Weise.
- Ich verweisen Sie auf diesen Artikel developer.mozilla.org/en-US/docs/DOM/document.createEvent
- Sind diese nicht von DOM-Ereignissen?
- Nicht unbedingt, Nein. Sie können Veranstaltungen erstellen (mit
document.createEvent
und lösen Sie programmgesteuert. - Wenn es möglich ist, mit jQuery ist es möglich, ohne jQuery; das ist eine verwirrende Punkt für viele neue Entwickler, jQuery ist nur eine Bibliothek von Funktionen/Objekte, die in javascript geschrieben.
- Vielen, vielen Dank! Aus irgendeinem Grund
document.createEvent
geklickt dieser Zeit C: - Können Sie Blick auf dieses stackoverflow.com/questions/399867/custom-events-in-jquery
- Danke @jcubic. Ich habe gerade vor kurzem festgestellt, dieser Artikel über Bindung in JQuery.
- Dokument.createEvent teilweise abgeschrieben und nicht gut dokumentiert. MDN empfiehlt die CustomEvent(). developer.mozilla.org/en-US/docs/Web/API/CustomEvent/... caniuse.com/#feat=customevent
- Denken Sie daran: ein Ereignis ist nur ein asynchroner Aufruf der Funktion. Siehe die nette Antwort von Herrn @Mohsen darüber, wie es zu implementieren.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie wollen ein komplett stand-alone-event-system, ohne sich auf DOM-events können Sie etwas haben, wie das mit Reaktor-Muster
Verwenden Sie es wie DOM-events-Modell
Live auf JSBin
e.callbacks.forEach(...)
.array.forEach(...)
muss nicht jede Art von hasOwnProperty Mechanismus zu vermeiden, vorbildgerechte Verschmutzung.Array.prototype.foo = 'lol'
,foo
wird nicht zeigen, bis inforEach
Schleifen, aber wird zeigen, bis infor...in
Schleife.forEach
hat eine leichte polyfillWenn Sie nicht möchten, implementieren Sie Ihre eigene event-handling-Mechanismen, die Ihnen gefallen könnten meinen Ansatz. Sie erhalten alle Funktionen, die Sie wissen, von den üblichen DOM-Ereignisse (preventDefault() zum Beispiel) und ich denke, es ist mehr leicht, denn es nutzt das bereits implementierte DOM-event-handling-Fähigkeiten des Browsers.
Erstellen Sie einfach eine normale DOM-EventTarget-Objekt im Konstruktor des Objekts, und übergeben Sie alle EventTarget interface-Aufrufe für das DOM-EventTarget Objekt:
Gibt es auch eine JSFiddle-snippet, um es zu testen mit dem browser.
div
, aber das scheint mir irgendwie besser.Necroposting ein wenig hier, aber ich schrieb so etwas wie dieser letzten Nacht - super-einfach, und aus der Basis von Backbone.js Veranstaltungen Modul:
Dieser Ansatz ist verblüffend einfach und erweiterbar, so dass Sie bauen eine komplexere Veranstaltung, das system auf Sie, wenn Sie brauchen.
Mithilfe der
EventDispatcher
ist so einfach wie:Mit einigen einfachen Verwendung von Namensräumen, Sie werden in der Lage sein, um pass basic-Ereignisse zwischen den Modulen mit Leichtigkeit!
off
Methode zum entfernen von Ereignis-Listenern[].forEach.call(handlers, ...)
statthandlers.forEach(...)
?handlers
ist eine tatsächlicheArray
Instanz.Kann man es mit JQuery.
Für ein Abonnement der das benutzerdefinierte Ereignis:
Werfen Ihre benutzerdefinierten Ereignisses:
Ist vielleicht nicht die schönste Art und Weise, dies zu tun, aber Sie können auch erstellen Sie Funktionen in Ihre Methode (die Methode addEventListener, dispatchEvent,...) das wickeln JQuery-Logik, zu unterstützen, sowohl native auf der Suche-api und JQuery.
Wahrscheinlich, benötigen Sie einen event-Mechanismus als ein Mittel der Kommunikation unter mehreren Objekten.
Heres, wie können Sie erreichen, dass:
JS:
HTML:
Hier ist eine einfache Erweiterung des Mohsen ' s Antwort, präsentiert sich als ein klares und kurzes Beispiel.
Alle seine Reagieren Funktionen werden gekapselt in einem
React()
eine Funktion integriertremoveEventListener()
, und das ganze Beispiel ist dargestellt, wie eine HTML-Datei (oder sehen Sie auf JSFiddle).