Compréhension approfondie des compétences de liaison_javascript d'événement JS

1. Modèle événementiel traditionnel

Il existe des limites dans les modèles d’événements traditionnels.

Les modèles en ligne sont utilisés sous forme d'attributs de balises HTML et mélangés avec du HTML. Cette méthode provoque sans aucun doute des problèmes de modification et d'expansion, et est rarement utilisée.

Le modèle de script consiste à écrire des fonctions de traitement d'événements dans des fichiers js, à obtenir des éléments de la page et à lier les fonctions d'événement correspondantes pour déclencher l'exécution. Mais il y a aussi des défauts :

1. Un événement est lié à plusieurs fonctions d'écoute d'événements, et ces dernières remplaceront les premières.

2. Situations dans lesquelles les liaisons répétées doivent être restreintes

3. Objet événementiel standardisé

2. Reliure événementielle moderne

Les événements de niveau DOM2 définissent deux méthodes pour ajouter et supprimer des événements : addEventListener() et removeEventListener(). Ils reçoivent respectivement trois paramètres : le nom de l'événement, la fonction, le bouillonnement ou la capture d'une valeur booléenne (vrai signifie capturer, faux signifie risquer Bubble).

En conséquence, IE fournit deux méthodes similaires, attachEvent() et detachEvent(), mais les deux méthodes d'IE ont un autre problème : l'objet this ne peut pas être transmis (cela dans IE pointe vers la fenêtre). usurpation d'identité d'objet :

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

Cependant, étant donné qu'une fonction anonyme est exécutée lors de l'ajout, elle ne peut pas être supprimée après l'ajout. De plus, la méthode fournie par IE entraînera également le problème de l'impossibilité d'exécuter les événements de liaison de manière séquentielle et provoquera des fuites de mémoire.

Afin de résoudre cette série de problèmes, il est nécessaire d'encapsuler davantage la méthode. Pour les autres navigateurs, utilisez le standard de niveau DOM2. Pour IE, utilisez l'ajout et la suppression basés sur le mode traditionnel. >

1. L'ajout utilise une table de hachage JS pour stocker les événements d'objet et attribue une valeur d'ID à chaque événement d'objet. En fonction de l'ordre d'appel ajouté, déterminez d'abord si la même fonction de traitement existe. Sinon, liez les événements dans l'ordre. . Les fonctions sont ajoutées à la table de hachage, ce qui résout le problème de l'impossibilité de s'exécuter séquentiellement et d'être ajoutées à plusieurs reprises

.

Lors de la suppression, la correspondance de la fonction de parcours est jugée, et si elle existe, supprimez-la

Résumé :

Je n'avais pas de compréhension approfondie de la liaison d'événements JS auparavant. Je suis même resté sur le modèle de liaison d'événements traditionnel, et ma compréhension de la mise en œuvre du programme était encore trop superficielle. Cette fois, j'ai beaucoup appris en apprenant l'encapsulation. bibliothèque. Applications orientées objet sur JS. Bien que les bibliothèques js similaires à JQuery aient obtenu un bon effet d'encapsulation du mécanisme de liaison de données, mais vous le savez seulement et ne savez pas pourquoi, vous avez toujours l'impression d'être dans le noir. Allez analyser l'implémentation spécifique en personne. vous ressentirez un sentiment d'illumination soudaine, et vous réaliserez également que pour créer un programme compatible et polyvalent, vous devez considérer beaucoup de contenu et résoudre de nombreux problèmes, et vous devenez progressivement plus clair sur ces problèmes.