Häufige Methoden zur Ereignisbindung: traditionelle Bindung, W3C -Bindungsmethode und IE -Bindungsmethode . Was für uns in der tatsächlichen Entwicklung wichtig ist, besteht jedoch darin, eine allgemeine Cross-Browser-Bindungsmethode zu erfordern. Wenn wir im Internet suchen, werden wir viele Methoden finden. Hier sind ein paar weitere bekannte Methoden:
Vor Beginn des Semesters sollten wir diskutieren, welche Anforderungen eine gute Methode addEvent () erfüllen sollte:
A. Das gleiche Ereignisgriff, bei dem das gleiche Element unterstützt wird, kann mehrere Hörfunktionen binden.
B. Wenn dieselbe Funktion mehrfach im selben Ereignishandle desselben Elements registriert ist, werden alle Registrierungen nach der ersten Registrierung ignoriert.
C. Dies sollte in der Funktionsbehörde auf den Knoten verweisen, der das Ereignis verarbeitet (z. B. den Knoten, der derzeit den Ereignishandler ausführt).
D. Die Ausführungsreihenfolge der Hörfunktion sollte in der Grandordnung ausgeführt werden.
e. Verwenden Sie Event = Ereignis nicht || Fenster.Event; in der Funktionskörper, um das Ereignisobjekt zu normalisieren;
1. Die von John Ressig geschriebene Funktion addEvent (), die geschrieben wurde
Funktion addEvent (obj, type, fn) {if (obj.attachEvent) {obj ['e'+type+fn] = fn; obj [type+fn] = function () {obj ['e'+type+fn] (window.event);} obj.attachEvent ('on'+type, obj [Typ+fn]); } else obj.addeventListener (Typ, fn, false); } function remeEvent (obj, type, fn) {if (obj.detACHEvent) {obj.detACHEvent ('on'+type, obj [type+fn]); OBJ [Typ+fn] = null; } else obj.removeventListener (Typ, fn, false); }Es ist wirklich überraschend, dass diese Funktion so einfach und leicht zu verstehen ist. Dann müssen wir uns noch die fünf oben genannten Anforderungen ansehen:
Zufrieden mit dem ersten Punkt;
Ich muss mit dem dritten und fünften Punkten zufrieden gewesen sein;
Für den zweiten Punkt ist es nicht erfüllt, da addEventListener () die doppelte Registrierung ignoriert, während AttattelEvent () dies nicht tut.
Der vierte Punkt ist jedoch nicht erfüllt, da der DOM -Standard nicht die Reihenfolge der zeitlichen Verarbeitungsfunktionen zum Aufrufen eines Objekts bestimmt, sodass er nicht als selbstverständlich angesehen werden sollte, dass sie in der Reihenfolge der Registrierung aufgerufen werden.
Diese Funktion ist jedoch immer noch eine sehr gute Funktion.
2. Die von Dean Edward geschriebene addEvent () -Funktion
Funktion AddEvent (Element, Typ, Handler) {if (! Handler. if (! element.events) element.events = {}; var Handler = Element.Events [Typ]; if (! Handler) {handlers = element.events [type] = {}; if (element ["on" + type]) {Handler [0] = Element ["on" + Typ]; }} Handler [Handler. $$ GUID] = Handler; element ["on" + type] = handleEvent;} addEvent.guid = 1; Funktion removentEvent (Element, Typ, Handler) {if (element.events && element.events [type]) {delete element.events [type] [Handler. $$ GUID]; }} Funktion handleEvent (Ereignis) {var returnValue = true; Ereignis = Ereignis || FixEvent (window.event); var Handler = this.events [Event.type]; für (var i in Handlern) {this. $$ handleEvent = Handler [i]; if (this. $$ HandleEvent (Ereignis) === false) {returnValue = false; }} return returnValue;}; Funktion FixEvent (Ereignis) {Event.PreventDefault = FixEvent.PreventDefault; Event.StopPropagation = FixEvent.StopPropagation; Rückgabeereignis;}; FixEvent.PreventDefault = function () {this.returnValue = false;}; FixEvent.stoppropagation = function () {this.cancelBubble = true;};Diese Funktion verwendet herkömmliche Bindungsmethoden und funktioniert daher in allen Browsern, ohne Speicherlecks zu verursachen.
Für die ursprünglich vorgeschlagenen 5 Punkte erfüllt die Funktion jedoch nur die ersten vier Punkte. Nur der letzte Punkt ist nicht erfüllt, da in JavaScript die Reihenfolge der Ausführung von für/in Aussagen in der Reihenfolge der Zuordnung nicht angegeben wird, obwohl die meiste Zeit in der erwarteten Reihenfolge ausgeführt wird, sodass die Reihenfolge dieser Anweisung in verschiedenen JavaScript -Versionen oder -implementierungen unterschiedlich sein kann.
3.. Verbesserung der addEvent () -Funktion von Dean Edward
Array.Prototype.Indexof = Funktion (obj) {var result = -1, länge = this.länge, i = Länge - 1; für (; i> = 0; i--) {if (this [i] == obj) {result = i; brechen; }} Rückgabeergebnis;} Array.Prototype.Contains = Funktion (obj) {return (this.indexof (obj)> = 0)} array.Prototype.Append = Funktion (obj, nodup) {if (! (nodup && this)) {this.länge] = obj; }} Array.prototype.remove = function (obj) {var index = this.indexof (obj); if (! index) return; zurückgeben. var Handler = Element.Events [Typ]; if (! Handler) {Handler = Element.Events [Typ] = []; if (element ['on' + type]) {Handler [0] = Element ['on' + type]; }} Handler.Append (fun, true) element ['on' + type] = handleEvent;} Funktion removentEvent (element, type, fun) {if (element.events && element.events [type]) {element.events [type] .remove (lustig); }} Funktion handleEvent (Ereignis) {var returnValue = true, i = 0; Ereignis = Ereignis || FixEvent (window.event); var Handlers = this.events [Event.Type], Länge = Handler.Length; für (; i <länge; i ++) {if (Handler [i] .Call (this, Ereignis) === false) {returnValue = false; }} return returnValue;} Funktion FixEvent (Ereignis) {Event.PreventDefault = FixEvent.PreventDefault; Event.StopPropagation = FixEvent.StopPropagation; return event;} fixEvent.preventDefault = function () {this.returnValue = false;}; FixEvent.stopPropagation = function () {this.cancelBubble = true;};Diese Funktion ist meine Verbesserung der AddEvent () -Funktion von Dean Edward, die den 5 anfänglichen Anforderungen vollständig erfüllt. Ich hoffe, es wird für das Lernen aller hilfreich sein. Vielen Dank für Ihre Lektüre.