Selbstgekapselte Javascript-Ereigniswarteschlangenfunktion version_javascript-Fähigkeiten

Hintergrund

Bei der Verwendung von addEventListener() oder attachmentEvent() zum Binden von Ereignissen in JavaScript treten mehrere kleinere Probleme auf:

1. Anonyme Funktionen, die mit addEventListener() oder attachmentEvent() hinzugefügt wurden, können nicht entfernt werden.

Code kopieren Der Code lautet wie folgt:

var oBtn = document.getElementById('btn');

oBtn.addEventListener('click',function(){
warning('button is clicked')
},false)

oBtn.reomveEventListener('click', function() {
warning('button is clicked')
},false)
//Das Ereignis auf oBtn kann nicht entfernt werden, da eine anonyme Funktion in

2 übergeben wird. ie6 - In ie8 gibt es ein Problem mit der Ausführung in umgekehrter Reihenfolge, wenn attachmentEvent() zum Binden mehrerer Ereignisse verwendet wird.

Code kopieren Der Code lautet wie folgt:

var oBtn = document.getElementById('btn ');

oBtn.attachEvent('onclick',function(){
alarm(1)
})

oBtn.attachEvent('onclick',function() {
Alert(2)
})

oBtn.attachEvent('onclick',function(){
Alert(3)
})
//ie9 Weiter Ausführungsreihenfolge 1, 2, 3
//Ausführungsreihenfolge unter ie6-ie8 3, 2, 1

Lösen Sie das Problem

Ich möchte ein browserübergreifendes Ereignisbindungsmodul schreiben, damit es in Zukunft wiederverwendet werden kann. Gleichzeitig möchte ich das Beschwerdeproblem lösen. JQuery verwendet intern Ereigniswarteschlangen und Daten-Caching-Mechanismen, um dieses Problem zu lösen. Ich habe mir den entsprechenden Quellcode angesehen und festgestellt, dass es wirklich kompliziert ist. Ich habe selbst einige Methoden ausprobiert und es geschafft. Der von mir gepostete Codeausschnitt war ursprünglich objektorientiert geschrieben. Ich wollte nicht, dass er kompliziert wird, also habe ich ihn in Funktionen geändert.

Code kopieren Der Code lautet wie folgt:

/*Schnittstelle für Bindungsereignisse
*
*@param {dom-DOM} und {type-string} und {fn-function} optionale Parameter {fnName-string}
* @execute Erstellen Sie eine Ereigniswarteschlange und fügen Sie sie dem DOM-Objektattribut hinzu
Fügen Sie den Ereignishandler (Funktion) zur Ereigniswarteschlange hinzu
Sie können dem Ereignishandler eine Kennung hinzufügen, um den angegebenen Ereignishandler zu löschen
*/
function bind(dom,type,fn,fnName){
dom.eventQueue = dom.eventQueue || {};
dom.eventQueue[type] = dom.eventQueue[type] | {};
dom.handler = dom.handler ||. {};

if (!fnName) {
var index = queueLength(dom,type);
dom.eventQueue [ type]['fnQueue' index] = fn;
}
else {
dom.eventQueue[type][fnName] = fn;
};

if (! dom .handler[type]) bindEvent(dom,type);
};

/*Bind event
*
*@param {dom-DOM} und {type-string }
*@execute Bindet ein Ereignis nur einmal, der Handler wird verwendet, um die Ereignishandler (Funktionen) in der Ausführungsereigniswarteschlange zu durchlaufen
*@caller bind()
*/
function bindEvent(dom, type ){
dom.handler[type] = function(){
for(var guid in dom.eventQueue[type]){
dom.eventQueue[type][guid].call(dom) ;
}
};

if (window.addEventListener) {
dom.addEventListener(type,dom.handler[type],false);
}
else {
dom.attachEvent('on' type,dom.handler[type]);
};
};

/*Schnittstelle zum Entfernen von Ereignissen
*
* @param {dom-DOM} und {type-string} optionale Parameter {fnName-function}
*@execute Wenn kein Bezeichner vorhanden ist, führen Sie unBindEvent() aus
Wenn ein Bezeichner vorhanden ist, löschen Sie den angegebenen Ereignishandler , wenn die Länge der Ereigniswarteschlange 0 ist, führen Sie unBindEvent()
*/
function unBind(dom,type,fnName){
var hasQueue = dom.eventQueue && dom.eventQueue[type]; > if (!hasQueue) return;
if (!fnName) {
unBindEvent(dom,type)
}
else {
delete dom.eventQueue[type][fnName] ;
     if (queueLength(dom,type) == 0) unBindEvent(dom,type);
     } > *@param {dom-DOM} und {type-string}
*@execute Entfernen Sie die Grenze Event-Handler-Handler und Löschen der Ereigniswarteschlange
*@caller unBind()
*/
function unBindEvent(dom,type){
if (window.removeEventListener) {
dom.removeEventListener( type,dom.handler[type])
}
else {
dom. detachEvent(type,dom.handler[type])
}

delete dom.eventQueue[type ];
};

/*Ereigniswarteschlangenlänge beurteilen
*
*@param {dom-DOM} und {type-string}
*@caller bind() unBind ()
*/
function queueLength(dom,type){
var index = 0;
for (var length in dom.eventQueue[type]){
index ;
}
Rückgabeindex;
};




Anwendung

Code kopieren

Der Code lautet wie folgt:

var oBtn = document.getElementById('btn');

//Bindungsereignisse
//Drei Klickereignisfunktionen für Schaltfläche gleichzeitig binden
//ie6 -Die Ausführungsreihenfolge bleibt unter ie8 unverändert
bind(oBtn,'click',function(){
alarm(1);
})
bind(oBtn,'click',function() {
Alert(2);
},'myFn')
bind(oBtn,'click',function(){
Alert(3);
})

//Ereignis entfernen
//Alle gebundenen Klickereignisfunktionen entfernen, das Entfernen anonymer Funktionen unterstützen
unBind(oBtn,'click')

//Nur Bezeichner entfernen Für die Ereignisfunktion von myfn
unBind(oBtn,'click','myFn')

Programmierideen

Die Hauptidee des Programms besteht darin, die Ereigniswarteschlange als Attribut des Dom-Elementobjekts zu verwenden und es dem Dom-Element hinzuzufügen, ohne die globale Umgebung zu verschmutzen. Dadurch kann das Problem der Bindung von Daten mehrerer Ereignisfunktionen gelöst werden von verschiedenen Ereignistypen zu verschiedenen Dom-Elementen.

Code kopieren Der Code lautet wie folgt:

//Ereigniswarteschlange auf Dom-Element
dom {
eventQueue : {
'click' : {
fnQueue1 : function,
myfn : function,
fnQueue3 : function                                                                                                                          .
fnQueue1: Funktion,
fnQueue2 : Funktion
}
}
}



Fügen Sie die Ereignisfunktion jedes Mal zur Ereigniswarteschlange des entsprechenden Ereignistyps hinzu und binden Sie das Ereignis nur einmal. Die Handler-Ereignisfunktion wird ausgeführt, wenn ein Ereignis ausgelöst wird, und der Handler durchläuft die Ereignisfunktionen in der Ereigniswarteschlange und führt sie aus.

unBind() entfernt alle gebundenen Ereignisfunktionen, wenn kein Bezeichner übergeben wird, unterstützt das Entfernen anonymer Funktionen und entfernt die angegebene Ereignisfunktion, wenn ein Bezeichner vorhanden ist.

Die Programmlogik ist nicht kompliziert. Es kann zu Fehlern und Leistungsproblemen kommen. Wenn Sie interessiert sind, geben Sie bitte Anleitung und Kommunikation.