Hintergrund
Es gibt mehrere geringfügige Probleme beim Binden von Ereignissen mit addEventListener () oder attoppent () in JavaScript:
1. Die anonyme Funktion, die mit AddEventListener () oder AttafEvent () hinzugefügt wurde, kann nicht entfernt werden.
Die Codekopie lautet wie folgt: var obtn = document.getElementById ('btn');
obtn.addeventListener ('klick', function () {
alarm ('Schaltfläche wird geklickt')
},FALSCH)
obtn.reomveEventListener ('klick', function () {
alarm ('Schaltfläche wird geklickt')
},FALSCH)
// Das Ereignis auf OBTN kann nicht entfernt werden, da eine anonyme Funktion übergeben wird
2. In IE6-IE8 wird das Problem der Umkehrreihenfolge mehrerer Ereignisse unter Verwendung von AttachEvent () begrenzt.
Die Codekopie lautet wie folgt:
var obtn = document.getElementById ('btn');
obtn.attachEvent ('onclick', function () {
Alarm (1)
})
obtn.attachEvent ('onclick', function () {
Alarm (2)
})
obtn.attachEvent ('onclick', function () {
Alarm (3)
})
// Eie9+ Ausführungsauftrag 1, 2, 3
// Ausführungsbestellungen unter IE6-IE8 3, 2, 1
Das Problem lösen
Ich möchte ein Cross-Browser-Event-Bindungsmodul schreiben, damit es später wiederverwendet werden kann, und gleichzeitig möchte ich das Berufungsproblem lösen. JQuery verwendet Ereigniswarteschlangen und Daten zwischen den Mechanismen, um dieses Problem zu lösen. Ich habe mir den entsprechenden Quellcode angesehen. Es war wirklich kompliziert. Ich habe einige Methoden selbst ausprobiert und sie kaum implementiert. Der Code ist in objektorientiertem Code veröffentlicht, und ich möchte nicht, dass die Leute ihn kompliziert sehen. Deshalb ändere ich ihn in Funktionen, um ihn zu organisieren.
Die Codekopie lautet wie folgt:
/*Bindungsereignisschnittstelle
*
*@param {dom-dom} und {type-String} und {fn-function} Optionale Parameter {fnnname-String}
*@Execute erstellen Sie eine Ereigniswarteschlange und fügen Sie sie den DOM -Objekteigenschaften hinzu.
Fügen Sie Event -Handler (Funktion) zur Ereigniswarteschlange hinzu
Der Ereignishandler kann ein Kennung hinzugefügt werden, um den angegebenen Ereignishandler zu löschen
*/
Funktion Bind (DOM, Typ, fn, fnname) {
Dom.Eventqueue = Dom.Eventqueue || {};
Dom.Eventqueue [Typ] = Dom.Eventqueue [Typ] || {};
Dom.handler = Dom.handler || {};
if (! fnnname) {
var index = queuelength (DOM, Typ);
Dom.EventQueue [Typ] ['fnqueue'+index] = fn;
}
anders {
Dom.Eventqueue [Typ] [fnname] = fn;
};
if (! Dom.handler [Typ]) BindEvent (DOM, Typ);
};
/*Bindungsereignis
*
*@param {dom-dom} und {type-String}
*@Execute -Ereignisse sind nur einmal gebunden. Handler wird verwendet, um Ereignishandler (Funktionen) in der Ausführungsereignis -Warteschlange zu durchqueren
*@Caller Bind ()
*/
Funktion BindEvent (DOM, Typ) {
Dom.handler [type] = function () {
für (var Guid in Dom.Eventqueue [Typ]) {
Dom.EventQueue [Typ] [Guid] .Call (DOM);
}
};
if (window.addeventListener) {
Dom.AdDeVentListener (Typ, Dom.handler [Typ], False);
}
anders {
Dom.attachEvent ('on'+Typ, Dom.handler [Typ]);
};
};
/*Entfernen Sie die Schnittstelle für das Ereignis
*
*@param {dom-dom} und {type-String} Optionale Parameter {fnname-function}
*@Execute Wenn es keine Kennung gibt, führen Sie UnbindEvent aus () aus.
Wenn es eine Kennung gibt, wird der angegebene Ereignishandler gelöscht. Wenn die Länge der Ereigniswarteschlange 0 beträgt, wird UnbindEvent () ausgeführt.
*/
Funktion unbind (DOM, Typ, fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type];
if (! hasqueue) kehren Sie zurück;
if (! fnnname) {
ungehindert (DOM, Typ)
}
anders {
DOM.EventQueue [Typ] [fnnname] löschen;
if (queueelength (DOM, Typ) == 0) UnbindEvent (DOM, Typ);
};
};
/*Ereignis entfernen
*
*@param {dom-dom} und {type-String}
*@Execute entfernt den gebundenen Event -Handler und löscht die Ereigniswarteschlange
*@Caller unbind ()
*/
Funktion UnBindEventEvent (DOM, Typ) {
if (window.removeEventListener) {
Dom.RemoveEventListener (Typ, Dom.handler [Typ])
}
anders {
Dom.DetacheAvent (Typ, Dom.handler [Typ])
}
DOM.Eventqueue [Typ] löschen;
};
/*Richter Event Warteschlange Länge
*
*@param {dom-dom} und {type-String}
*@Caller Bind () unbind ()
*/
Funktion queuegth (DOM, Typ) {
var index = 0;
für (var Länge in Dom.Eventqueue [Typ]) {
Index ++;
}
Rückgabeindex;
};
Wie man benutzt
Die Codekopie lautet wie folgt:
var obtn = document.getElementById ('btn');
// Bindungsereignis
// Binden Sie drei Klick -Ereignisfunktionen gleichzeitig für die Schaltfläche
// Die Ausführungsauftrag unter IE6-IE8 bleibt unverändert
bind (obtn, 'click', function () {
Alarm (1);
})
bind (obtn, 'click', function () {
Alarm (2);
}, 'myfn')
bind (obtn, 'click', function () {
Alarm (3);
})
// Ereignis entfernen
// alle gebundenen Klick -Ereignisfunktionen entfernen und die Entfernung anonymer Funktionen unterstützen
Unbind (obtn, 'klick')
// Entfernen Sie nur Ereignisfunktionen mit Identifier myfn
Unbind (obtn, 'klick', 'myfn')
Programmideen
Die Hauptidee des Programms besteht darin, die Ereigniswarteschlange als Attribut des DOM -Element -Objekts zum DOM -Element hinzuzufügen, ohne die globale Umgebung zu verschmutzen. Dies kann das Problem der Datenspeicherung mehrerer Ereignisfunktionen verschiedener DOM -Elemente lösen, die an verschiedene Ereignistypen binden.
Die Codekopie lautet wie folgt:
// Ereigniswarteschlange zum DOM -Element
Dom {
EventQueue: {
'klicken': {
fnqueue1: Funktion,
myfn: Funktion,
fnqueue3: Funktion
}
'Mouseover': {
fnqueue1: Funktion,
fnqueue2: Funktion
}
}
}
Jedes Mal wird die Ereignisfunktion zunächst zur Ereigniswarteschlange des entsprechenden Ereignisentyps hinzugefügt, und das Ereignis ist nur einmal gebunden. Wenn ein Ereignis ausgelöst wird, wird die Handler -Ereignisfunktion ausgeführt, und der Handler durchquert die Ereignisfunktion in der Ausführungsereignis -Warteschlange.
UnBind () entfernt alle gebundenen Ereignisfunktionen, wenn es keine eingehende Bezeichnung gibt, unterstützt die Entfernung anonymer Funktionen und entfernt die angegebenen Ereignisfunktionen, wenn ein Kenner vorliegt.
Die Programmlogik ist nicht kompliziert und es kann Fehler und Leistungsprobleme geben. Wenn Sie interessiert sind, können Sie führen und kommunizieren.