Fonction de file d'attente d'événements Javascript auto-encapsulée version_javascript compétences

Contexte

Il existe plusieurs problèmes mineurs lors de l'utilisation de addEventListener() ou attachEvent() pour lier des événements en JavaScript :

1. Les fonctions anonymes ajoutées à l'aide de addEventListener() ou attachEvent() ne peuvent pas être supprimées.

Copier le code Le code est le suivant :

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

oBtn.addEventListener('click',function(){
alert('le bouton est cliqué')
},false)

oBtn.reomveEventListener('click', function() {
alert('button is clicked')
},false)
//L'événement sur oBtn ne peut pas être supprimé car une fonction anonyme est passée dans

2. ie6 - Dans ie8, il existe un problème d'exécution dans l'ordre inverse lors de l'utilisation de attachEvent() pour lier plusieurs événements.

Copier le code Le code est le suivant :

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

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

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

oBtn.attachEvent('onclick',function(){
alert(3)
})
//ie9 Suivant séquence d'exécution 1, 2, 3
//Ordre d'exécution sous ie6-ie8 3, 2, 1

Résoudre le problème

Je souhaite écrire un module de liaison d'événements entre navigateurs afin qu'il puisse être réutilisé à l'avenir, en même temps, je souhaite résoudre le problème d'appel. JQuery utilise en interne des files d'attente d'événements et des mécanismes de mise en cache des données pour résoudre ce problème. J'ai examiné le code source pertinent et j'ai découvert que c'était vraiment compliqué. J'ai moi-même essayé certaines méthodes et j'ai réussi à y parvenir. L'extrait de code que j'ai publié a été initialement écrit de manière orientée objet. Je ne voulais pas que ce soit compliqué, je l'ai donc modifié en fonctions.

Copier le code Le code est le suivant :

/*Interface pour les événements de liaison
*
*@param {dom-DOM} et {type-string} et {fn-function} paramètres facultatifs {fnName-string}
* @execute Créez une file d'attente d'événements et ajoutez-la à l'attribut de l'objet DOM
Ajoutez le gestionnaire d'événements (fonction) à la file d'attente d'événements
Vous pouvez ajouter un identifiant au gestionnaire d'événements pour supprimer le gestionnaire d'événements spécifié
*/
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);
};

/*Événement de liaison
*
*@param {dom-DOM} et {type-string }
*@execute Ne lie un événement qu'une seule fois, le gestionnaire est utilisé pour parcourir les gestionnaires d'événements (fonctions) dans la file d'attente des événements d'exécution
*@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]);
};
};

/*Interface de suppression d'événements
*
* @param {dom-DOM} et {type-string} paramètres facultatifs {fnName-function}
*@execute S'il n'y a pas d'identifiant, exécutez unBindEvent()
S'il y a un identifiant, supprimez le gestionnaire d'événements spécifié , si la longueur de la file d'attente des événements est 0, exécutez 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} et {type-string}
*@execute Supprimer la limite gestionnaire de gestionnaire d'événements et effacez la file d'attente des événements
*@caller unBind()
*/
function unBindEvent(dom,type){
if (window.removeEventListener) {
dom.removeEventListener( type,dom.handler[type])
}
else {
dom.detachEvent(type,dom.handler[type])
}

supprimer dom.eventQueue[type ];
};

/*Longueur de la file d'attente des événements du juge
*
*@param {dom-DOM} et {type-string}
*@caller bind() unBind ()
*/
function queueLength(dom,type){
var index = 0;
for (var length in dom.eventQueue[type]){
index ;
}
indice de retour ;
};




Comment utiliser

Copier le code

Le code est le suivant :

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

//Événements de liaison
//Lier trois fonctions d'événement de clic pour le bouton en même temps
//ie6 -L'ordre d'exécution reste inchangé sous ie8
bind(oBtn,'click',function(){
alert(1);
})
bind(oBtn,'click',function() {
alert(2);
},'myFn')
bind(oBtn,'click',function(){
alert(3);
})

//Supprimer l'événement
//Supprimer toutes les fonctions d'événement de clic lié, prise en charge de la suppression des fonctions anonymes
unBind(oBtn,'click')

//Supprimer uniquement les identifiants Pour la fonction d'événement de myfn
unBind(oBtn,'click','myFn')

Idées de programmation

L'idée principale du programme est d'utiliser la file d'attente d'événements comme attribut de l'objet élément dom et de l'ajouter à l'élément dom sans polluer l'environnement global. Cela peut résoudre le problème de liaison des données de plusieurs fonctions d'événement. de différents types d'événements à différents éléments dom.

Copier le code Le code est le suivant :

//File d'attente d'événements sur l'élément dom
dom {
eventQueue : {
'clic' : {
fnQueue1 : fonction,
myfn : fonction,
fnQueue3 : fonction
                                                                                                                                                        . > fnQueue2 : fonction
}
}
}



Ajoutez la fonction d'événement à la file d'attente des événements du type d'événement correspondant à chaque fois et ne liez l'événement qu'une seule fois. La fonction d'événement du gestionnaire est exécutée lorsqu'un événement est déclenché, et le gestionnaire parcourt et exécute les fonctions d'événement dans la file d'attente des événements.

unBind() supprime toutes les fonctions d'événement liées si aucun identifiant n'est transmis, prend en charge la suppression des fonctions anonymes et supprime la fonction d'événement spécifiée s'il existe un identifiant.

La logique du programme n'est pas compliquée. Il peut y avoir des bugs et des problèmes de performances. Si vous êtes intéressé, veuillez fournir des conseils et une communication.