arrière-plan
Il y a plusieurs problèmes mineurs lors de la liaison des événements utilisant addEventListener () ou attachEvent () en javascript:
1. La fonction anonyme ajoutée à l'aide d'AdveventListener () ou de Piévacte () ne peut pas être supprimée.
La copie de code est la suivante: var obtn = document.getElementById ('btn');
obtn.addeventListener ('click', function () {
alerte ('le bouton est cliqué'))
},FAUX)
obtn.reomveEventListener ('click', function () {
alerte ('le bouton est cliqué'))
},FAUX)
// L'événement sur OBTN ne peut pas être supprimé car une fonction anonyme est transmise
2. Dans IE6-IE8, le problème d'exécution de l'ordre inverse de plusieurs événements est délimité à l'aide de PitEvent ().
La copie de code est la suivante:
var obtn = document.getElementById ('btn');
obtn.attachevent ('onclick', function () {
alerte (1)
})
obtn.attachevent ('onclick', function () {
alerte (2)
})
obtn.attachevent ('onclick', function () {
alerte (3)
})
// EIE9 + Ordre d'exécution 1, 2, 3
// Ordonnances d'exécution sous IE6-IE8 3, 2, 1
Résoudre le problème
Je veux écrire un module de liaison d'événements de navigateur croisé afin qu'il puisse être réutilisé plus tard, et en même temps, je souhaite résoudre le problème d'appel. JQuery utilise les files d'attente d'événements et les mécanismes de mise en cache des données pour résoudre ce problème. J'ai regardé le code source pertinent. C'était vraiment compliqué. J'ai moi-même essayé certaines méthodes et je les ai à peine implémentées. Le code est affiché dans les objets, et je ne veux pas que les gens le voient de manière compliquée, donc je le transforme en fonctions pour l'organiser.
La copie de code est la suivante:
/ * Interface d'événement de liaison
*
* @ param {Dom-Dom} et {Type-String} et {Fn-Function} Paramètres facultatifs {FnName-String}
* @ exécuter Créer une file d'attente d'événements et l'ajouter aux propriétés de l'objet DOM.
Ajouter un gestionnaire d'événements (fonction) à la file d'attente d'événements
Un identifiant peut être ajouté au gestionnaire d'événements pour supprimer le gestionnaire d'événements spécifié
* /
fonction bind (dom, type, fn, fnname) {
dom.eventqueue = dom.eventqueue || {};
dom.eventqueue [type] = dom.eventqueue [type] || {};
dom.handler = dom.handler || {};
if (! fnname) {
var index = queuelngth (dom, type);
dom.eventqueue [type] ['fnqueue' + index] = fn;
}
autre {
dom.eventqueue [type] [fnname] = fn;
};
if (! Dom.Handler [type]) BinkEvent (Dom, Type);
};
/ * Événement de liaison
*
* @ param {dom-dom} et {type-string}
* @ Les événements d'exécution ne sont liés qu'une seule fois, le gestionnaire est utilisé pour traverser les gestionnaires d'événements (fonctions) dans la file d'attente d'événements d'exécution
* @ appelant bind ()
* /
fonction relighEvent (dom, type) {
dom.handler [type] = fonction () {
pour (var Guid dans dom.eventqueue [type]) {
dom.eventqueue [type] [GUID] .Call (Dom);
}
};
if (window.addeventListener) {
dom.addeventListener (type, dom.handler [type], false);
}
autre {
dom.attachevent ('on' + type, dom.handler [type]);
};
};
/ * Supprimer l'interface de l'événement
*
* @ param {Dom-Dom} et {Type-String} Paramètres facultatifs {FnName-Function}
* @ exécuter s'il n'y a pas d'identificateur, exécutez UnbindEvent ()
S'il y a un identifiant, le gestionnaire d'événements spécifié est supprimé. Si la longueur de la file d'attente d'événements est de 0, UnbindEvent () est exécutée.
* /
fonction unbind (dom, type, fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type];
si (! Hasqueue) retourner;
if (! fnname) {
UnbodEventil (Dom, type)
}
autre {
supprimer dom.eventqueue [type] [fnname];
if (queuelngth (dom, type) == 0) UnbindEvent (dom, type);
};
};
/ * Supprimer l'événement
*
* @ param {dom-dom} et {type-string}
* @ Execute supprime le gestionnaire d'événements lié et efface la file d'attente d'événements
* @ appelant Unbind ()
* /
fonction inindivent (dom, type) {
if (window.removeeventListener) {
dom.removeeventListener (type, dom.handler [type])
}
autre {
dom.detachevent (type, dom.handler [type])
}
supprimer dom.eventqueue [type];
};
/ * Longueur de la file d'attente des événements de juge
*
* @ param {dom-dom} et {type-string}
* @ appelant bind () unstind ()
* /
fonction realEnglength (dom, type) {
var index = 0;
pour (longueur var dans dom.eventqueue [type]) {
index ++;
}
Index de retour;
};
Comment utiliser
La copie de code est la suivante:
var obtn = document.getElementById ('btn');
// Événement de liaison
// lier les fonctions de l'événement à trois clics en même temps pour le bouton
// L'ordonnance d'exécution sous IE6-IE8 reste inchangée
bind (obtn, 'click', function () {
alerte (1);
})
bind (obtn, 'click', function () {
alerte (2);
}, 'myfn')
bind (obtn, 'click', function () {
alerte (3);
})
// supprimer l'événement
// supprimer toutes les fonctions d'événement de clic lié, support la suppression des fonctions anonymes
Unbind (obtn, 'click')
// supprimer les fonctions d'événement uniquement avec l'identifiant myfn
Unbind (obtn, «cliquez», «myfn»)
Idées de programme
L'idée principale du programme est d'ajouter la file d'attente d'événements en tant qu'attribut de l'objet DOM Élément DOM à l'élément DOM sans polluer l'environnement global. Cela peut résoudre le problème du stockage de données de plusieurs fonctions d'événements de différents éléments DOM se liant à différents types d'événements.
La copie de code est la suivante:
// la file d'attente d'événements sur l'élément DOM
dom {
EventQueue: {
'cliquez sur': {
fnqueue1: fonction,
myfn: fonction,
fnqueue3: fonction
}
'Mouseover': {
fnqueue1: fonction,
fnqueue2: fonction
}
}
}
Chaque fois, la fonction d'événement est d'abord ajoutée à la file d'attente d'événements du type d'événement correspondant, et l'événement n'est lié qu'une seule fois. Lorsqu'un événement est déclenché, la fonction d'événement de gestionnaire est exécutée et le gestionnaire traverse la fonction d'événement dans la file d'attente d'événements d'exécution.
Unstind () supprime toutes les fonctions d'événement liées en cas d'identifiant entrant, prend en charge la suppression des fonctions anonymes et supprime les fonctions d'événement spécifiées s'il existe un identifiant.
La logique du programme n'est pas compliquée et il peut y avoir des bogues et des problèmes de performances. Si vous êtes intéressé, vous pouvez guider et communiquer.