Encapsule un écouteur d'événements Javascript qui prend en charge les compétences fonctions

Encapsule un écouteur d'événements Javascript qui prend en charge les compétences fonctions_javascript anonymes

WBOY

Libérer： 2016-05-16 16:46:04

original

1297 Les gens l'ont consulté

Tout le monde utilise beaucoup la surveillance des événements dans js. Il s'agit simplement de déterminer si le navigateur prend en charge addEventListener et attachEvent. Il existe de nombreuses méthodes de surveillance des événements en ligne, mais certaines d'entre elles ne sont pas parfaites. La méthode ci-dessous est la même pour ajouter des écouteurs d'événements, sauf que certaines opérations ont été effectuées lors de l'annulation de la liaison d'événements. Elle peut désormais prendre en charge l'utilisation de fonctions anonymes, il n'est donc pas nécessaire de nommer la fonction séparément lors de la liaison d'événements.

Code principal :

Copier le code Le code est le suivant :

 
/*Événements de liaison et dissociation*/
var handleHash = {};
var bind = (function() {
 if (window.addEventListener) {
 return function( el, type, fn, capture) {
 el.addEventListener(type, function(){
 fn();
 handleHash[type] = handleHash[type] || [];
 handleHash [type].push(arguments.callee);
 }, capture);
 };
 } else if (window.attachEvent) {
 return function(el, type, fn, capture) {
 el.attachEvent("on" type, function(){
 fn();
 handleHash[type] = handleHash[type] || [];
 handleHash[type].push (arguments.callee);
 });
 };
 }
})();
var unbind = (function(){
 if (window.addEventListener) { 
 return function(el, type) {
 if(handleHash[type]){
 var i = 0, len = handleHash[type].length;
 for (i; i el.removeEventListener(type, handleHash[type][i]);
 }
 };
 };
 } else if (window.attachEvent) {
 return function(el, type) {
 if(handleHash[type]){
 var i = 0, len = handleHash[type].length;
 for (i; i el.detachEvent("on" type, handleHash[type][i]);
 }
 };
 };
 }
})() ;

Analyse des principes :

handleHash fonctionne comme un événement de cache de table de hachage. handleHash['event name'] est un tableau pour ajouter plusieurs méthodes d'écoute d'événements. Lors de la dissociation d'un événement, parcourez le tableau de handleHash['event name'], puis supprimez.

Utilisation :

Copier le code Le code est le suivant :

lier (obj,'click',function(){
 alert ('click');
});
unbind(obj,'click');