Implementierung von Javascript-Ereignisauslösern Einführung_Javascript-Fähigkeiten

Ereignisauslöser können wörtlich genommen werden, sie werden zum Auslösen von Ereignissen verwendet, aber einige Freunde, die sie noch nie verwendet haben, sind möglicherweise verwirrt. Ereignisse werden normalerweise nicht durch die tatsächlichen Vorgänge des Benutzers auf der Seite ausgelöst. Diese Ansicht ist nicht ganz korrekt, da einige Ereignisse von Programmen implementiert werden müssen, z. B. benutzerdefinierte Ereignisse. Einige benutzerdefinierte Ereignisse des Ajax-Frameworks von jQuery müssen von Ereignisauslösern implementiert werden. In einigen Sonderfällen ist es natürlich bequemer, einen Ereignisauslöser zum Auslösen eines Ereignisses zu verwenden, als die tatsächliche Aktion des Benutzers zum Auslösen des Ereignisses.

Browser verfügen über native Methoden zur Unterstützung von Ereignisauslösern, es gibt jedoch große Kompatibilitätsprobleme. IE verfügt über eigene Methoden, und auch andere Standardbrowser verfügen über eine Reihe von Methoden oder schlecht, für WEB-Entwickler ist die Entwicklung mehrerer Methodensätze eine Art Qual für Entwickler. Der IE unterstützt die Methode „fireEvent“ zum Implementieren der Ereignisauslösung, und Standardbrowser unterstützen „dispatchEvent“ zum Implementieren der Ereignisauslösung. Der doppelte IE9 unterstützt beides. Das Folgende ist der Quellcode von Prototype.js (eigentlich habe ich ihn aus Situ Zhengmeis Blog kopiert):

Code kopieren Der Code lautet wie folgt:

var fireEvent = function(element,event) {
if (document.createEventObject){
// IE-Browser unterstützt die FireEvent-Methode
var evt = document.createEventObject();
return element.fireEvent('on' event,evt)
}
else{
// Andere Standardbrowser verwenden die DispatchEvent-Methode
var evt = document.createEvent( 'HTMLEvents' ); // initEvent akzeptiert 3 Parameter:
// Event geben Sie ein, ob Blasen erzeugt werden sollen, ob das Standardverhalten des Browsers verhindert werden soll
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};

Die obige Methode ist mit gängigen Browsern kompatibel, um Ereignisauslöserfunktionen zu implementieren. Bei einigen gekapselten Ereignisverarbeitungssystemen wie dem Ereignismodul von jQuery ist dies jedoch nicht so einfach und kann nur durch Simulation implementiert werden. Ich habe zuvor ein sehr einfaches Ereignisverarbeitungssystem geschrieben und bin kürzlich auf die Notwendigkeit benutzerdefinierter Ereignisse gestoßen. Daher habe ich einen Ereignisauslöser basierend auf dem vorherigen Ereignissystem simuliert. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/**
* Ereignisauslöser
* @param { Object } DOM-Element
* @param { String / Object } Ereignistyp/Ereignisobjekt
* @param { Array } Zusätzliche Informationen, die an die Ereignisverarbeitungsfunktion übergeben werden Parameter
* @param { Boolean } Gibt an, ob
gesprudelt werden soll*/
trigger: function( elem, event, data , isStopPropagation ){
var type = event.type ||. event,
// Geblasenes übergeordnetes Element, bis hin zum Dokument, window
parent = elem.parentNode || |.
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, type 'Handler' );

isStopPropagation = typeof data === 'boolean' ? > data : (isStopPropagation || false);

data = data && isArray( data ) ? data : [];

// Erstellen Sie ein benutzerdefiniertes Ereignisobjekt
event = typeof event === 'object'? };

event.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// Sich selbst rekursiv aufrufen, um Blasenbildung zu simulieren
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}

Das Prinzip der Simulation ist nicht schwierig. Wenn es eine tatsächliche Operation gibt, die das Ereignis auslöst, wird die entsprechende Ereignisverarbeitungsfunktion ausgeführt Um den Ereignisauslöser zu erhalten, müssen Sie nur die entsprechende Ereignisbehandlungsfunktion ausführen, die die grundlegendste ist.

Wenn das eigentliche Ereignis eintritt, generiert der Browser ein Ereignisobjekt, das einige Attribute und Informationen zum Zeitpunkt des Eintretens des Ereignisses enthält. Wenn kein tatsächliches Ereignis auftritt, gibt es kein Ereignisobjekt. Daher erstellt der obige Code auch ein Ereignisobjekt, um die grundlegendsten Funktionen zu erfüllen.

Wenn kein tatsächliches Ereignis auftritt, gibt es natürlich kein Blasenverhalten. Wenn Sie also die Blasenfunktion simulieren möchten, müssen Sie ständig nach dem übergeordneten Element suchen und prüfen, ob derselbe Typ gebunden ist. Ereignisse bis zum Erreichen des Dokuments und des Fensters. Wenn die Struktur komplex ist, wird die Leistung dieser rekursiven Aufrufmethode als schlecht eingeschätzt.

Das letzte ist das Standardverhalten des Browsers, das meiner Meinung nach so mühsam ist, dass ich nicht weiß, wie ich es implementieren soll Habe den jQuery-Trigger getestet und ihn nicht implementiert, aber ein anderes Verhalten scheint im API-Handbuch eingeführt zu sein. Schließlich ist diese Funktion nicht sehr wichtig und ich habe noch nicht allzu viel recherchiert.