À partir du chapitre d'aujourd'hui, je me concentrerai sur l'introduction du contenu de la gestion des événements de KITJS et j'essaierai de vous exposer dans un langage simple comment le cadre JS traditionnel implémente sa propre fonction de gestion d'événements indépendants en interne.
(I) Événements DOM ordinaires
Nous pouvons généralement écrire des événements en HTML en soutenant
<a onclick = ”alert (1)”> test </a>
Ou lier après avoir obtenu l'objet DOM
document.getElementById ('a'). onClick = function () {alert (1)}
Ou événements secondaires
document.getElementById ('A'). AddEventListener ('click', function () {alert (1)}, Flase)
Ou via la balise de script
<script pour = ”a” event = ”onclick”> alert (1) </cript>
La norme W3C recommande la troisième méthode de liaison ci-dessus, qui est une méthode d'événement secondaire, dans le but de découpler la forte dépendance de HTML et JS
(Ii) Question
Cependant, si nous n'utilisons que le mode 3 pour effectuer directement notre programmation JS, ce n'est pas suffisant, car nous rencontrerons les problèmes suivants
1. Compatibilité du navigateur. Les paramètres du navigateur pris en charge par les séries IE et W3C ne sont pas cohérents pour les noms et paramètres de méthode de liaison d'événements de deuxième niveau.
2. Après avoir lié les événements de niveau 2, vous ne pouvez pas savoir si d'autres ont lié des événements au même élément, quels événements ont été liés et quel est le contenu de l'événement?
3. Une fois que la méthode de liaison des événements de niveau 2 est déclenchée, l'ordre n'est pas dans l'ordre avant la liaison, mais est exécuté au hasard. Cependant, parfois, nous devons commander les méthodes déclenchées.
4.
5. Plusieurs fois, nous enregistrons un événement de niveau 2 via la méthode de la fonction anonyme, et aucune poignée pour enregistrer la méthode d'exécution de l'événement n'est laissée, il est donc difficile d'annuler l'événement via devingEventListener.
(Iii) comment résoudre le problème du kit
OK, le cadre JS existe pour résoudre les problèmes ci-dessus. Voyons comment Kit gère les problèmes ci-dessus.
Dans l'API Kit.js, il existe une méthode EV (config)
Cette méthode accepte un objet de type de carte, qui contient 4 paramètres importants.
élément el qui doit être lié
Type d'événement de chaîne
FN déclenche la méthode d'exécution
La portée peut être omise, si ce pointeur doit être spécifié, si aucun, l'EL au moment de l'enregistrement est passé comme ce pointeur
(Iv) Analyse du code
Jetons un coup d'œil à l'implémentation du code
Commencez directement à partir de la partie centrale
Si le paramètre entrant n'est pas vide, un objet est créé sur le paramètre entrant El pour enregistrer l'enregistrement des événements de KitJS eVreg
Il y a deux objets enfants dans l'objet EVREG, l'un est appelé Evregev, qui sauve l'événement enregistré
Dans l'objet Evregev, enregistrez une clé en tant qu'événement enregistré actuel et la valeur est un tableau. Dans le tableau, mettez les paramètres de configuration passés dans la méthode EV dans l'ordre de First puis d'arrivée. Notez qu'il s'agit d'un tableau! ! ! Parce que les tableaux peuvent enregistrer l'ordre, c'est très important
Il existe également une méthode anonyme appelée eVregFn, qui sauve des déclencheurs d'événements.
Nous pouvons voir qu'Evregfn est un événement anonyme. Au début, il déterminera si la fenêtre de variable globale [me.constants.kit_event_stopimMediatEpropagation] est == true. Si cela est vrai, il reviendra et ne continuera pas à s'exécuter.
Regardez ensuite vers le bas, il acceptera l'objet EV déclenché par l'événement et attachera de nombreux objets à l'EV en utilisant MergeIF, tels que Target, CurrentTarget, RelatedTarget, pour résoudre le problème de compatibilité du navigateur.
StopNow, StopDefault, Stopgoon sont des méthodes créées pour empêcher les événements de continuer à déclencher.
Le paragraphe suivant est la clé de evregfn. Nous allons parcourir le tableau d'événements dans l'Evregev créé avant, supprimer les paramètres de configuration passés dans la méthode EV précédente dans l'ordre et exécuter la méthode dans le paramètre de configuration. Si la valeur de retour de la méthode n'est pas vide, elle renverra sa valeur de retour.
Enfin, nous rendons un navigateur compatible et lions notre méthode anonyme EVREGFN en utilisant une méthode d'événement de niveau 2.
(V) Résumé
Autrement dit, Kit utilise sa propre méthode anonyme pour mettre en cache la poignée d'enregistrement des événements et entrer dans un tableau, afin qu'il puisse se souvenir de la séquence des événements, ainsi que de fournir une entrée pour découvrir les événements, paramètres, méthodes, etc. précédemment enregistrés, et en même temps il est compatible avec la compatibilité du navigateur.
(Vi) événement de déconnexion
Avec Kit Aide Cache Event Gandles, la connexion devient simple
Vous pouvez voir que Kit trouve la configuration de l'événement correspondant via une comparaison directe, ou une comparaison fn.tostring, et fn.toString (). Trim () Comparaison et la supprime du tableau
(Vii) Amélioration des événements
Vous auriez dû remarquer à l'heure actuelle que Kit a effectué une opération Mergeif sur l'objet d'événement système. Tout d'abord, pourquoi avez-vous besoin de faire Megerif? Étant donné que les propriétés d'objet de l'objet d'événement système sont en lecture et ne peuvent pas être écrasées, vous ne pouvez ajouter que des propriétés qu'elle n'a pas.
Kit ne peut donc que Megerif. Nous savons tous qu'il existe une incompatibilité de l'objet d'événement de l'objet d'événement de chaque navigateur, donc Kit doit corriger ces incompatibilité. Par exemple, IE n'a pas d'attribut cible, seulement Srcelement. Nous pouvons y ajouter un attribut cible pour obtenir la compatibilité de la norme W3C
Bien sûr, la simple réparation ne peut pas répondre à nos besoins. Plusieurs fois, nous devons encore faire un peu de gain de poids pour l'objet de l'événement.
Par exemple, lors du développement de touché et de touche sur l'iPhone, nous devons souvent obtenir des décalages à un seul doigt et obtenir des décalages à un seul doigt, EV.TargetTouches [0] .Clientx, un tel code, mais une fois que la fonction anonyme est comme ceci, elle sera incompatible sur le PC.
Ce qu'il faut faire? Peu importe, nous pouvons donner à l'événement des objets Mergeif nos propres attributs
FirstFingerClientX, etc., afin que nous puissions facilement implémenter le code unifié développé par mobile et PC.
Y compris, le prochain article parlera de HTML5 Drag and Drop, et les événements de gestes avancés sont basés sur cette base.
Ajoutez à cela, pourquoi ne pas nouveau son propre événement comme Extjs
1. L'objet natif du système a une certaine relation d'héritage et ne veut pas être détruit.
2. Si vous utilisez votre propre nouvel objet, le code peut être irréprochable une fois qu'il est hors du cadre et le contenu du code doit être modifié à nouveau.