Vertiefte Kenntnisse der JS-Ereignisbindung_Javascript-Fähigkeiten

1. Traditionelles Veranstaltungsmodell

Bei traditionellen Veranstaltungsmodellen gibt es Einschränkungen.

Inline-Modelle werden in Form von HTML-Tag-Attributen verwendet und mit HTML gemischt. Diese Methode verursacht zweifellos Änderungs- und Erweiterungsprobleme und wird nur noch selten verwendet.

Das Skriptmodell besteht darin, Ereignisverarbeitungsfunktionen in JS-Dateien zu schreiben, Elemente von der Seite abzurufen und die entsprechenden Ereignisfunktionen zu binden, um die Ausführung auszulösen. Es gibt aber auch Mängel:

1. Ein Ereignis ist an mehrere Ereignisüberwachungsfunktionen gebunden, und letztere überschreibt erstere.

2. Situationen, in denen die wiederholte Bindung eingeschränkt werden muss

3. Standardisiertes Ereignisobjekt

2. Moderne Eventbindung

Ereignisse auf DOM2-Ebene definieren zwei Methoden zum Hinzufügen und Löschen von Ereignissen: addEventListener() und removeEventListener(). Sie erhalten jeweils drei Parameter: Ereignisname, Funktion, Bubbling oder Erfassung eines booleschen Werts (true bedeutet Erfassung, false bedeutet Blase riskieren).

Entsprechend bietet der IE zwei ähnliche Methoden, attachmentEvent() und detachEvent(), aber die beiden Methoden des IE haben ein anderes Problem: Das Objekt kann nicht übergeben werden (dies zeigt im IE auf window). Sie können die Aufrufmethode verwenden Objektidentität:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

Da jedoch beim Hinzufügen eine anonyme Funktion ausgeführt wird, kann sie nach dem Hinzufügen nicht gelöscht werden. Außerdem verursacht die vom IE bereitgestellte Methode das Problem, dass Bindungsereignisse nicht nacheinander ausgeführt werden können, was zu Speicherverlusten führt.

Um diese Reihe von Problemen zu lösen, ist es notwendig, die Methode weiter zu kapseln. Verwenden Sie für andere Browser den DOM2-Level-Standard. Verwenden Sie für den IE das Hinzufügen und Löschen >

1. Das Hinzufügen verwendet eine JS-Hash-Tabelle zum Speichern von Objektereignissen und weist jedem Objektereignis einen ID-Wert zu. Bestimmen Sie zunächst, ob dieselbe Verarbeitungsfunktion vorhanden ist . Der Hash-Tabelle werden Funktionen hinzugefügt, wodurch das Problem gelöst wird, dass sie nicht nacheinander ausgeführt werden können und wiederholt hinzugefügt werden

2. Beim Löschen wird die Übereinstimmung der Traversalfunktion beurteilt und, falls vorhanden, gelöscht

Zusammenfassung:

Vorher hatte ich kein tiefes Verständnis für die JS-Ereignisbindung. Ich blieb beim traditionellen Ereignisbindungsmodell und mein Verständnis der Programmimplementierung war immer noch zu oberflächlich Bibliothek. Objektorientierte Anwendungen auf JS. Obwohl js-Bibliotheken, die JQuery ähneln, einen guten Kapselungseffekt des Datenbindungsmechanismus erzielt haben, wissen Sie nicht, warum, aber Sie haben immer noch das Gefühl, im Dunkeln zu tappen und die spezifische Implementierung persönlich zu analysieren. Sie werden ein Gefühl der plötzlichen Erleuchtung verspüren, und Sie werden auch erkennen, dass Sie viele Inhalte berücksichtigen und viele Probleme lösen müssen, um ein kompatibles und vielseitiges Programm zu erstellen, und Sie werden sich über diese Probleme allmählich klarer werden.