Ereignisauslöser können wörtlich gut verstanden werden und werden verwendet, um Ereignisse auszulösen, aber einige Freunde, die sie nicht benutzt haben, sind möglicherweise verwirrt. Werden Ereignisse normalerweise durch die tatsächlichen Operationen von Benutzern auf der Seite ausgelöst? Diese Ansicht ist nicht vollständig korrekt, da einige Ereignisse durch Programme wie benutzerdefinierte Ereignisse implementiert werden müssen, und einige benutzerdefinierte Ereignisse des AJAX -Frameworks von JQuery müssen durch Ereignisauslöser implementiert werden. Natürlich ist es in einigen besonderen Fällen bequemer, Ereignisauslöser zu verwenden, um Ereignisse auszulösen, als Ereignisse durch die tatsächlichen Vorgänge des Benutzers auszulösen.
Der Browser verfügt über native Methoden, um die Implementierung von Ereignisauslöschern zu unterstützen, aber es gibt große Unterschiede in der Kompatibilität. Dieses Kompatibilitätsproblem wird vollständig erwartet. Der IE hat seine eigenen Methoden und andere Standardbrowser haben auch eine Reihe von Methoden. Ganz zu schweigen davon, wessen Methoden gut oder schlecht sind. Für Webentwickler ist es für Entwickler eine Folter, verschiedene Methoden zu entwickeln. IE unterstützt die FireEvent -Methode zur Implementierung von Ereignisauslöser, Standard -Browser unterstützen SendEvent bei der Implementierung von Ereignisauslösungen und beide unterstützen IE9. Das Folgende ist der Quellcode von Prototype.js (tatsächlich habe ich ihn aus dem Blog von situ kopiert):
Die Codekopie lautet wie folgt:
var fireEvent = Funktion (Element, Ereignis) {
if (document.createEventObject) {
// IE Browser unterstützt die FireeEvent -Methode
var evt = document.createEventObject ();
return element.fireevent ('on'+Ereignis, EVT)
}
anders{
// Andere Standardbrowser verwenden die DispatchEvent -Methode
var evt = document.createEvent ('htmlevents');
// IniteEvent akzeptiert 3 Parameter:
// Ereignisart, ob es sprudelt, ob das Standardverhalten des Browsers blockiert
evt.initevent (Ereignis, wahr, wahr);
return! element.dispatchEvent (EVT);
}
};
Die obige Methode ist mit den Mainstream -Browsern kompatibel, um die Funktion von Ereignisauslösern zu implementieren. Für einige eingekapselte Ereignisverarbeitungssysteme, wie das Ereignismodul von JQuery, ist es jedoch nicht so einfach und kann nur durch Simulation implementiert werden. Ich habe zuvor ein sehr einfaches Ereignisverarbeitungssystem geschrieben und kürzlich auf die Notwendigkeit benutzerdefinierter Ereignisse gestoßen. Daher habe ich einen Ereignisauslöser simuliert, der auf dem vorherigen Ereignissystem basiert, und der Code lautet wie folgt:
Die Codekopie lautet wie folgt:
/**
* Ereignisauslöser
* @param {Objekt} DOM -Element
* @param {String / Objekt} Ereignistyp / Ereignisobjekt
* @param {array} Zusätzliche Parameter übergeben an die Ereignishandlerfunktion
* @param {boolean} ist es sprudelt?
*/
Auslöser: Funktion (Elem, Ereignis, Daten, isStoppropagation) {
var type = event.type || Ereignis,
// Blasen übergeordnetes Element, bis zum Dokument, Fenster
Eltern = Elem.Parentnode ||
Elem.OwnerDocument ||
Elem === Elem.OwnerDocument && Win,
eventHandler = $ .data (Elem, Typ + 'Handler');
isStopPropagation = typeof data === 'boolean'?
Daten: (isStopPropagation || Falsch);
Data = Data && isArray (Daten)? Daten: [];
// Erstellen Sie ein benutzerdefiniertes Ereignisobjekt
event = typeof event === 'Objekt'?
Ereignis : {
Typ: Typ,,
Verhinderungdefault: noop,
StopPropagation: function () {
isStoppropagation = true;
}
};
event.target = elem;
Data.Unshift (Ereignis);
if (EventHandler) {
EventHandler.call (Elem, Daten);
}
// Rufen Sie sich rekursiv an, um Blasen zu simulieren
if (Eltern &&! IsStoppropagation) {
Data.Shift ();
this.trigger (übergeordnet, Ereignis, Daten);
}
}
Das Prinzip der Simulation ist nicht schwierig. Binden Sie eine Ereignishandhabungsfunktion an ein bestimmtes Element. Wenn ein Ereignis tatsächlich ausgelöst wird, wird die entsprechende Veranstaltungsbearbeitungsfunktion ausgeführt. Um die Funktion des Ereignisauslösers zu erreichen, erhalten Sie daher einfach die entsprechende Funktion des Ereignishandlings und führen Sie sie aus. Dies ist das grundlegendste.
Wenn das tatsächliche Ereignis auftritt, generiert der Browser ein Ereignisobjekt, das einige Attribute und Informationen enthält, wenn das Ereignis auftritt. Wenn es kein tatsächliches Ereignis gibt, gibt es kein Ereignisobjekt, sodass der obige Code auch ein Ereignisobjekt erstellt, um die grundlegendsten Funktionen zu erfüllen.
Es gibt auch Ereignisse, die blasen. Wenn keine tatsächlichen Ereignisse auftreten, gibt es natürlich kein Blasenverhalten. Wenn Sie dann die Blasenfunktion simulieren möchten, müssen Sie ständig das übergeordnete Element nachschlagen und überprüfen, ob dieselbe Art von Ereignis bis zum Dokument und dem Fenster gebunden ist. Wenn die Struktur komplex ist, wird die Leistung dieser rekursiven Anrufmethode auf nicht sehr gut geschätzt.
Schließlich gibt es das Standardverhalten des Browsers. Ich denke, es ist ziemlich problematisch, dies zu simulieren, so problematisch, dass ich nicht weiß, wie ich es implementieren soll. Zum Beispiel der Standardsprung des A -Tags. Ich habe den Auslöser von JQuery getestet, aber es wurde nicht implementiert, aber einige andere Verhaltensweisen scheinen im API -Handbuch eingeführt zu werden. Schließlich ist diese Funktion nicht sehr wichtig, und ich habe noch nicht viel detaillierte Forschung durchgeführt.