Une brève discussion sur le principe de l'événement jQuery Binding

Il existe une méthode data dans jq, qui lie les données pertinentes aux éléments DOM. Lorsqu'un événement est lié au dom à l'aide de la méthode jq, une liste de temps correspondante sera générée
Vous pouvez voir l'exemple suivant (veuillez le consulter dans Firefox car les objets dans Firefox prennent en charge toSource())

Copier le code Le code est le suivant :

data est utilisé pour lier des données à des éléments
La source de données est l'objet cache
Lorsque l'élément est lié aux données, un attribut jQueryxxx sera ajouté à l'élément xxx qui est l'horodatage de l'exécution de jq
. Je m'explique ici, il y a un uuid qui est cumulatif
La valeur de jQueryxxx est cet uuid
La clé de cache est cet uuid
la valeur est les données à sauvegarder
Les données sont très importantes pour la liaison d'événements........................

Copier le code Le code est le suivant :

fonction maintenant(){
    renvoyer une nouvelle date ;
} ;
var gagne     = ceci,
    expando = "jQuery" maintenant(),
       uuid    = 0,
      cache   = {};
win.data = function(elem, nom, données){
    var id = elem[expando];
    si(!id)
        id = elem[expando] = uuid;
    if(nom&&!cache[id])
        cache[id] = {};
    if(data !== non défini)
        cache[id][nom] = données ;
    renvoyer le nom
        ? cache[id][nom]
        : identifiant;
>
win.removeData = function(elem, nom){
    var id = elem[expando];
    si (nom){
        if (cache[id]) {
            supprimer le cache[id][nom] ;
            nom = "" ;
            pour ( nom dans le cache[ id ] )
                casser;
            si ( !name )
                supprimer les données (elem);
        }
    }autre{
            essayez {
                supprimer l'élément[expando] ;
            } attraper(e){
                if ( elem.removeAttribute )
                    elem.removeAttribute( expansion );
            }
            supprimer le cache[id] ;
    }
>

win.each = function( objet, rappel, args ) {
    nom du var, i = 0, longueur = objet.longueur ;
    si ( arguments ) {
        if ( longueur === non défini ) {
            pour (nom dans l'objet)
                if ( callback.apply( object[ name ], args ) === false )
                    casser;
        } autre
            pour ( ; i < longueur; )
                if ( callback.apply( object[ i ], args ) === false )
                    casser;
    } autre {
        if ( longueur === non défini ) {
            pour (nom dans l'objet)
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    casser;
        } autre
            pour ( var valeur = objet[0];
                je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){}
    }
    renvoyer l'objet ;
>

Ensuite, implémentez l'ajout d'événements

Dans jq se trouve la méthode add dans jQuery.event
Certaines fonctions sont implémentées dans la méthode add
Récupérez les événements de l'élément et gérez les données liées à ces deux données
events stocke une liste d’événements
Le format est le suivant
{
cliquez : [{handler:function(){},type :"click",guid:'xx'}.....],
souris : [...]
>
handle est la fonction exécutée
(Toutes les fonctions d'exécution sont les mêmes. Elles parcourent la liste des événements et exécutent l'événement correspondant)
Parcourez ensuite les types car plusieurs événements peuvent être liés
La fonction de rappel donnera également plusieurs attributs
Supposons que la fonction de rappel soit handler
handler.guid = gevent.guid
handler.type = nom
le nom doit être considéré comme un nom spécial pour une suppression facile
Par exemple
$('#xx')
.bind('clic',function(){})
.bind('click.d',handler)
Le nom est d
Lors de la suppression, vous ne pouvez supprimer que l'événement d sans supprimer l'événement click ci-dessus

Finalement, l'événement est lié à l'élément, mais les fonctions exécutées le sont toutes
fonction(){
gevent.handle.apply(arguments.callee.elem, arguments);
});

Copier le code Le code est le suivant :

win.gevent = {

guide : 1,

Ajouter : fonction (élément, types, gestionnaire){

Si (elem.nodeType == 3 || elem.nodeType == 8)

             revenir ;

             if ( elem.setInterval && elem != window )

              elem = window;

//Donne à la fonction un index unique pour faciliter la suppression ultérieure de l'événement 

          if ( !handler.guid )

               handler.guid = this.guid;

//Récupère les données sous le handle d'événements de l'élément 

      var événements = data(elem, "events") || data(elem, "events", {}),

                handle =data(elem, "handle") || data(elem, "handle", function(){

//gevent.handle est la fonction qui sera exécutée après le déclenchement de divers comportements 

gevent.handle.apply(arguments.callee.elem, arguments);

            });

          handle.elem = elem;

//Nom de l'événement Traverse car il peut être cliqué sur la souris 

Chaque(types.split(/s/), fonction(index, type) {

            var namespaces = type.split(".");

//Obtenir le nom de l'événement

            type = namespaces.shift();

//Supprimez l'objet après le point. C'est un nom spécial lors de la suppression, vous pouvez spécifier de le supprimer, comme click.d
.
​​​​​​ //Utilisez le type d'événement pour enregistrer ce nom spécial

                handler.type = namespaces.slice().sort().join(".");

//Obtenir si l'événement existe déjà dans l'objet événements

            var handlers = events[type];

//Si l'événement n'existe pas, lie l'événement à l'élément
                if (!handlers) {

                    handlers = events[type] = {};

Si (elem.addEventListener)

                             elem.addEventListener(type, handle, false);

                   else if (elem.attachEvent)

                       elem.attachEvent(type "on", handle);
            }

//Mettez la fonction dans la liste d'événements de l'élément

                 handlers[handler.guid] = handler;
        });
elem = nul ;
>

>

gevent.hander est la fonction réellement exécutée par l'événement lié
Il y a aussi une place pour un nom spécial dans gevent.hander, mais je ne sais pas à quoi il sert
L'événement est d'abord empaqueté dans le gestionnaire
Pour l'emballage, voir gevent.fix et setEvent
L'essentiel est de faire une copie d'un événement natif puis de combiner les méthodes incompatibles en écriture compatible
Récupérez ensuite les événements (liste des événements) de l'élément
Parcourez ensuite la liste d'événements pour déterminer si le type est la clé de la liste d'événements. Si tel est le cas, exécutez l'événement
. La valeur de retour sera jugée lors de l'exécution de la fonction de liste
Si vous retournez false, vous pouvez également organiser le bouillonnement d'événements et le comportement par défaut

Copier le code Le code est le suivant :

win.gevent = {
handle : fonction (événement) {
          var tous, gestionnaires ;
//Événement packaging
          event = arguments[0] = gevent.fix( event || window.event );
         event.currentTarget = this;
//Ici...
var namespaces = event.type.split(".");
         event.type = namespaces.shift();
         all = !namespaces.length;
var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "(\.|$)");
//Récupère la liste des événements du comportement de cet élément
            handlers = (data(this, "events") || {} )(event.type]; //Parcourez cette liste d'événements et exécutez les choses à exécuter
pour ( var j dans les gestionnaires ) {
var handler = handlers[j];
Si ( all || namespace.test(handler.type) ) {
                                  // Transmettre une référence à la fonction de gestionnaire elle-même
                              // Afin que nous puissions le supprimer ultérieurement
                             // Le commentaire sur jq est écrit comme ceci : Faites référence au gestionnaire d'événements à cet événement pour plus de commodité et supprimez-le plus tard
.                                                // Mais dans la suppression, le gestionnaire d'événements n'est pas utilisé. Je ne sais pas à quoi il sert ici. Et lorsqu'il y a plusieurs événements, cet événement est remplacé
.                   event.handler = handler;
//Exécute l'événement et c'est un événement appelé avec un élément Vous pouvez exécuter cet élément dans l'événement et ret est la valeur de retour de la fonction
. var ret = handler.apply(this, arguments);
//S'il y a une valeur de retour et que la valeur de retour est fausse, l'exécution empêche l'événement de bouillonner et le comportement par défaut de l'événement d'exécution est bloqué Si( ret !== non défini ){
                     event.result = ret;
Si ( ret === false ) {
                         event.preventDefault();
                           event.stopPropagation();
                 }
                                                                                                                                                                                                            >
},
props : "altKey attrChange attrName bulles bouton annulable charCode clientX clientY ctrlKey currentTarget données détail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue RelatedNode RelatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "), Correctif : fonction (événement) {
//new setEvent donnera à l'événement un attribut expando. S'il existe l'un des attributs, cela signifie que l'événement a été généré et qu'il n'est pas nécessaire de l'envelopper à nouveau
            if ( événement[expando] )
           événement de retour ;
//Garder un événement original
// new Un nouvel événement Ceci est différent de l'événement original
var originalEvent = événement;
        event = new setEvent(originalEvent);
//Obtenir la valeur d'attribut de l'événement d'origine. Pour connaître les valeurs d'attribut disponibles, voir this.props
pour ( var i = this.props.length, prop; i; ){
              prop = this.props[ --i ];
            event[ prop ] = originalEvent[ prop ];
>
//Unifiez les éléments cibles dans event.target
Si ( !event.target )
                event.target = event.srcElement || // Corrige #1925 où srcElement pouvait ne pas être défini non plus
//S'il s'agit d'un nœud de texte, récupérez son nœud parent
Si ( event.target.nodeType == 3 )
             event.target = event.target.parentNode;

Si ( !event.ratedTarget && event.fromElement )
event.ratedTarget = event.fromElement == event.target event.toElement : event.fromElement;         événement de retour ;
                                             >
win.setEvent = fonction(src){
// Autoriser l'instanciation sans le mot-clé 'new'
// Objet événement
Si( src && src.type ){
This.originalEvent = src;
This.type = src.type;
// Type d'événement
}ailleur
This.type = src;
// timeStamp est buggé pour certains événements sur Firefox(#3843)
// On ne se fiera donc pas à la valeur native
This.timeStamp = maintenant();
// Marquez-le comme corrigé
Ceci[expando] = true;
>
fonction returnFalse(){
Renvoie faux ;
>
fonction returnTrue(){
renvoie vrai ;
>
setEvent.prototype = {
prévenirDefault : function() {
var e = this.originalEvent;
Si( !e )
          revenir ;
// si PreventDefault existe, exécutez-le sur l'événement d'origine
Si (e.preventDefault)
          e.preventDefault();
// sinon, définissez la propriété returnValue de l'événement d'origine sur false (IE)
e.returnValue = false;
},
stopPropagation : function() {
var e = this.originalEvent;
Si( !e )
          revenir ;
// si stopPropagation existe, exécutez-le sur l'événement d'origine
Si (e.stopPropagation)
           e.stopPropagation();
// sinon, définissez la propriété CancelBubble de l'événement d'origine sur true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation:function(){
This.isImmediatePropagationStopped = returnTrue;
This.stopPropagation();
},
isImmediatePropagationStopped : returnFalse
};

Un exemple complet

Copier le code Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

以上内容只是自己的一些理解,水平有限,难免有错,望指正...

Étiquettes associées：

jquery 事件绑定

source：php.cn

Article précédent：Outil d'analyse et de compression JavaScript Compétences JavaScript Analyser_javascript Article suivant：bibliothèque d'encapsulation simple nodeweibo pour l'exploration du guide d'utilisation des données Weibo

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur