Comment ordonner les évènements liés avec jQuery

J'avais essayé pour les âges de généraliser ce type de démarche, mais dans mon cas, j'ai été intéressée uniquement par l'ordre du premier écouteur d'événement dans la chaîne.

Si c'est de toute utilisation, voici mon plugin jQuery qui lie un écouteur d'événement qui est toujours déclenché avant toutes les autres:

** Mise à JOUR en ligne avec jQuery changements (merci Toskan) **

(function($) {
    $.fn.bindFirst = function(/*String*/ eventType, /*[Object])*/ eventData, /*Function*/ handler) {
        var indexOfDot = eventType.indexOf(".");
        var eventNameSpace = indexOfDot > 0 ? eventType.substring(indexOfDot) : "";

        eventType = indexOfDot > 0 ? eventType.substring(0, indexOfDot) : eventType;
        handler = handler == undefined ? eventData : handler;
        eventData = typeof eventData == "function" ? {} : eventData;

        return this.each(function() {
            var $this = $(this);
            var currentAttrListener = this["on" + eventType];

            if (currentAttrListener) {
                $this.bind(eventType, function(e) {
                    return currentAttrListener(e.originalEvent); 
                });

                this["on" + eventType] = null;
            }

            $this.bind(eventType + eventNameSpace, eventData, handler);

            var allEvents = $this.data("events") || $._data($this[0], "events");
            var typeEvents = allEvents[eventType];
            var newEvent = typeEvents.pop();
            typeEvents.unshift(newEvent);
        });
    };
})(jQuery);

Choses à noter:

• Cela n'a pas été entièrement testé.
• Il s'appuie sur le fonctionnement interne du framework jQuery ne change pas (testé uniquement avec 1.5.2).
• Il n'en sera pas nécessairement déclenchée avant que les écouteurs d'événements qui sont liés d'une autre manière que comme un attribut de l'élément source ou à l'aide de jQuery bind() et d'autres fonctions connexes.

Dowski de la méthode est bonne si tous vos rappels sont toujours présents et vous êtes heureux avec eux être dépendants les uns des autres.

Si vous voulez que les rappels à être indépendants les uns des autres, cependant, vous pourrait être pour profiter de bulles et de joindre les événements ultérieurs que les délégués des parents d'éléments. Les gestionnaires sur les éléments de parent sera déclenchée après les gestionnaires sur l'élément, en continuant jusqu'à ce document. C'est assez bonne, que vous pouvez utiliser event.stopPropagation(), event.preventDefault(), etc sauter des gestionnaires et d'annuler ou de l'onu-annuler l'action.

$( '#mybutton' ).click( function(e) { 
    //Do stuff first
} );

$( '#mybutton' ).click( function(e) { 
    //Do other stuff first
} );

$( document ).delegate( '#mybutton', 'click', function(e) {
    //Do stuff last
} );

Ou, si vous n'aimez pas cela, vous pouvez utiliser Nick Lessive bindLast plugin à la force d'un événement lié dernier: https://github.com/nickyleach/jQuery.bindLast.

Ou, si vous utilisez jQuery 1.5, vous pouvez aussi être de faire quelque chose d'intelligent avec le nouveau Différé d'objet.

Veuillez noter que dans le jQuery univers cela doit être mis en œuvre différemment de la version 1.8. La suite de la parution de la note est de le jQuery blog:

.de données(“événements”): jQuery stocke ses les événements liés à des données dans un objet de données
nommé (attendre) événements sur chaque élément. C'est une des données internes
structure en 1.8 ce sera supprimée de l'utilisateur des données de l'espace de nom
afin de ne pas entrer en conflit avec les éléments de même nom. de jQuery de données d'événement
peut encore être accessibles via jQuery._data(élément, "les événements")

Nous faire avoir le contrôle complet de l'ordre dans lequel les gestionnaires d'exécuter dans le jQuery univers. Ricoo des points ci-dessus. Ne ressemble pas à sa réponse lui a valu beaucoup d'amour, mais cette technique est très pratique. Considérons, par exemple, chaque fois que vous devez exécuter votre propre gestionnaire avant un gestionnaire dans une bibliothèque widget, ou vous devez avoir le pouvoir d'annuler l'appel pour le widget du gestionnaire conditionnellement:

$("button").click(function(e){
    if(bSomeConditional)
       e.stopImmediatePropagation();//Don't execute the widget's handler
}).each(function () {
    var aClickListeners = $._data(this, "events").click;
    aClickListeners.reverse();
});

function bindFirst(owner, event, handler) {
    owner.unbind(event, handler);
    owner.bind(event, handler);

    var events = owner.data('events')[event];
    events.unshift(events.pop());

    owner.data('events')[event] = events;
}

J'ai le même problème et a trouvé ce sujet. les réponses ci-dessus peut résoudre ces problème, mais je ne pense pas que eux sont de bons projets.

permettez-nous de penser le monde réel.

si nous utilisons ces réponses, nous devons changer notre code. vous devez changer votre style de code. quelque chose comme ceci:

original:

$('form').submit(handle);

hack:

bindAtTheStart($('form'),'submit',handle);

comme le temps passe, pensez à votre projet. le code est moche et difficile à lire! anthoer raison est simple est toujours la meilleure. si vous avez 10 bindAtTheStart, il peut pas de bugs. si vous avez 100 bindAtTheStart, êtes-vous vraiment sûr que vous pouvez garder dans le bon ordre?

donc, si vous devez lier mêmes événements multiples.Je pense que la meilleure façon de contrôler les js-fichier ou js-code de l'ordre de chargement. jquery peut gérer des données d'événements comme la file d'attente. la commande est du premier entré, premier sorti. vous n'avez pas besoin de modifier le code. il suffit de changer l'ordre de chargement.

Dans certains cas particuliers, lorsque vous ne pouvez pas changer la façon dont les événements de clic sont liés (les liaisons d'événements sont fabriqués à partir d'autres codes), et vous pouvez modifier l'élément HTML, voici une solution possible (avertissement: c'est pas la méthode recommandée pour lier les événements, d'autres développeurs vous assassiner pour cela):

<span onclick="yourEventHandler(event)">Button</span>

Avec cette façon de liaison, votre événement virage sera ajouté en premier, de sorte qu'il sera exécuté en premier.