Wir können Ereignisse anpassen, um eine flexiblere Entwicklung zu erzielen. Ereignisse können ein sehr leistungsstarkes Werkzeug sein, wenn sie ordnungsgemäß verwendet werden. Die ereignisbasierte Entwicklung hat viele Vorteile (später eingeführt).
Funktionen mit benutzerdefinierten Ereignissen sind Event, CustomEvent und DispatchEvent.
Passen Sie Ereignisse direkt mit dem Ereigniskonstruktor an:
var event = new event ('Build'); // Hören Sie für das Ereignis.CustomEvent kann ein stärker maßgeschneidertes Ereignis erstellen und auch von einigen Daten begleitet werden. Die spezifische Verwendung ist wie folgt:
var myevent = new CustOMEvent (Ereignisname, Optionen);
Wo Optionen sein können:
{Detail: {...}, Blasen: TRUE, Cancelable: False}Das Detail kann einige Initialisierungsinformationen speichern und kann aufgerufen werden, wenn sie ausgelöst werden. Andere Eigenschaften sind zu definieren, ob das Ereignis sprudeln und andere Funktionen haben.
Eingebaute Ereignisse werden vom Browser gemäß bestimmten Vorgängen ausgelöst, und maßgeschneiderte Ereignisse müssen manuell ausgelöst werden. Mit der SendEvent -Funktion wird ein Ereignis ausgelöst:
element.dispatchEvent (CustOMEvent);
Der obige Code zeigt an, dass das CustomEvent -Ereignis im Element ausgelöst wird. Verwenden Sie es zusammen:
// Fügen Sie ein geeignetes Ereignishörer hinzu.
Verwenden Sie benutzerdefinierte Ereignisse, um auf Kompatibilitätsprobleme zu achten, aber die Verwendung von JQuery ist viel einfacher:
// benutzerdefinierte Ereignis $ (Element) .on ('MyCustomeEvent', function () {}); // Triggerereignis $ (Element) .Tigger ('MyCustomeEvent'); Zusätzlich können Sie mehr Parameterinformationen übergeben, wenn Sie ein benutzerdefiniertes Ereignis auslösen: $ ("P") .on ("MyCustomevent", Funktion (Ereignis, myName) {$ (this) .Text (myName + ", Hallo!");});Die benutzerdefinierten JavaScript-Ereignisse unterscheiden sich von selbstdefessionellen Ereignissen wie Click and Senden. Bevor Sie die Vorteile von benutzerdefinierten Ereignissen beschreiben, sehen wir uns ein Beispiel für benutzerdefinierte Ereignisse an:
<div id="testBox"></div>// Create event var evt = document.createEvent('Event');// Define event type evt.initEvent('customEvent', true, true);// Listen to event var obj = document.getElementById('testBox');obj.addEventListener('customEvent', function(){ console.log('customEvent event ausgelöst ');}, falsch);Für bestimmte Effekte können Sie die Demo überprüfen. Geben Sie Obj.DispatchEvent (EVT) in die Konsole ein. Sie können sehen, dass die Ausgabe "CustOMent Event ausgelöst" in der Konsole, was darauf hinweist, dass das benutzerdefinierte Ereignis erfolgreich ausgelöst wurde.
In diesem Prozess erstellt die CreateEvent -Methode ein leeres Ereignis -EVT und verwendet dann die InitEvent -Methode, um den Typ des Ereignisses als vereinbartes benutzerdefiniertes Ereignis zu definieren, und hört dann auf das entsprechende Element zu. Verwenden Sie dann DispatchEvent, um das Ereignis auszulösen.
Das ist richtig, der Mechanismus benutzerdefinierter Ereignisse ist wie ein normales Ereignis - das Hören nach Ereignissen, das Schreiben von Rückrufvorgängen und das Ausführen von Rückrufen nach Auslösen von Ereignissen. Der Unterschied besteht jedoch darin, dass benutzerdefinierte Ereignisse von uns vollständig gesteuert werden, was bedeutet, dass eine JavaScript -Entkopplung implementiert wird. Wir können mehrere assoziierte, aber logisch komplexe Operationen mit dem Mechanismus benutzerdefinierter Ereignisse flexibel steuern.
Natürlich haben Sie möglicherweise vermutet, dass der obige Code in niedrigeren Versionen von IE nicht wirksam wird. Tatsächlich wird CreateEvent () in IE8 und unterhalb der Versionen von IE nicht unterstützt, aber es gibt die private fireeEvent () -Methode des IE, aber leider unterstützt FireEvent nur die Auslösen von Standard -Ereignissen. Daher können wir nur eine spezielle und einfache Methode verwenden, um ein benutzerdefiniertes Ereignis auszulösen.
// Typ ist ein benutzerdefiniertes Ereignis, wie z. obj.attachEvent ('onPropertychange', function (event) {if (event.propertyName == type) {callback.call (obj);}});Das Prinzip dieser Methode besteht tatsächlich darin, der DOM eine benutzerdefinierte Eigenschaft hinzuzufügen und das Ereignis des PropertyChange des Elements anzuhören. Wenn sich der Wert einer bestimmten Eigenschaft in der DOM ändert, wird der PropertyChange -Rückruf ausgelöst, und dann wird im Rückruf festgelegt, ob es sich bei der geänderten Eigenschaft um unsere benutzerdefinierte Eigenschaft handelt. In diesem Fall wird der vom Entwickler tatsächlich definierte Rückruf ausgeführt. Dies simuliert den Mechanismus benutzerdefinierter Ereignisse.
Um den Mechanismus benutzerdefinierter Ereignisse zu ermöglichen, mit dem Hör- und simulierten Auslösen von Standardereignissen zusammenzuarbeiten, wird hier ein vollständiger Ereignismechanismus angegeben. Dieser Mechanismus unterstützt die Überwachung von Standard -Ereignissen und benutzerdefinierten Ereignissen und beseitigt die Hör- und simulierten Auslöservorgänge. Es ist zu beachten, dass es sich einig ist, dass benutzerdefinierte Ereignisse das Präfix von "benutzerdefiniert" haben, um die Logik des Codes klarer zu machen (z.
/ *** @Description enthält Ereignishör-, Entfernungs- und Simulationsereignisse, die Kettenaufrufe unterstützt**/ (Funktion (Fenster, undefiniert) {var ev = window.ev = fenster. 1)? _that.element.adDeVentListener (Typ, Callback, Falsch); } var fnev = function (Ereignis) {Ereignis = Ereignis? ! _that; _that.element.removeEventListener (Typ, Rückruf, Falsch); _that.element.detAchEvent ('Onpropertychange', _that.element ['Callback' + Callback]); * @Supported für andere*/ _that.element [' + type] = null;} return _that; if (_that.Element.dispatchEvent) {// Ereigniser erstellen var evt = document.creeEvent ('Ereignis'); type.indexof ('benutzerdefinierte')! = -1) {_that.element [type] ++; Testfall 1 (benutzerdefinierter Ereignistest) // Testfall 1 (benutzerdefinierter Ereignistest) // Ereignismechanismus einführen // ... // DOMVAR testbox = document.getElementById ('testbox'); // Callback -Funktion 1Function TriggerEvent () {console.log ('Ausgelöste Ereignis -Customcons -Störungen'). Benutzerdefinierte Ereignis benutzerdefinierte CustomConsole ');} // Kapselung testbox = $ (Testbox); // Binden Sie zwei Rückruffunktionen gleichzeitig, unterstützt Kettenaufruf an testbox.add (' CustomConsole ', TriggerEvent) .Add (' CustomConsole ', Triggeragain);Der vollständige Code ist in der Demo.
Call testbox.trigger ('CustomConsole') in der Konsole nach dem Öffnen der Demo, um das benutzerdefinierte Ereignis selbst auszulösen. Sie können sehen, dass die Konsole zwei Eingabeaufforderungen ausgibt, und dann testbox.remove ('benutzerdefinierter Konsole', Triggeragain) eingeben, um den nächsten Hörer zu entfernen. Verwenden Sie zu diesem Zeitpunkt testbox.trigger ('benutzerdefiniertesConsole'), um das benutzerdefinierte Ereignis auszulösen. Sie können sehen, dass die Konsole nur eine Eingabeaufforderung ausgibt, dh der nächste Hörer wird erfolgreich entfernt. Alle Funktionen des Ereignismechanismus funktionieren normal.