Direct vs Délégué - jQuery .sur()

J'essaie de comprendre cette différence entre les direct et délégué gestionnaires d'événements à l'aide de la jQuery .sur() méthode. Plus précisément, la dernière phrase de ce paragraphe:

Lorsqu'un selector est fourni, le gestionnaire d'événement est appelé délégué. Le gestionnaire n'est pas appelée lorsque l'événement se produit directement sur l'élément lié, mais seulement pour les descendants (éléments internes) qui correspondent au sélecteur. jQuery bulles de l'événement à partir de la cible de l'événement jusqu'à l'élément sur lequel le gestionnaire est attaché (c'est à dire, plus intime ultrapériphériques de l'élément) et exécute le gestionnaire de l'un des éléments le long du chemin d'accès correspondant au sélecteur.

Que faut-il dire par "exécute le gestionnaire des éléments"? J'ai fait un page de test à expérimenter avec le concept. Mais les deux constructions suivantes pour le même comportement:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

ou,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

Peut-être que quelqu'un pourrait faire référence à un autre exemple de clarifier ce point? Merci.

  • Pour tous les intéressés: jsperf.com/jquery-fn-on-delegate-vs-direct
  • J'ai commenté sur vos violons ci-dessous, mais ici, essentiellement, il n'est pas configuré correctement (vous êtes de liaison à l'élément parent, et dont la délégation est prévu pour les enfants). Pour répondre à votre question moey cela signifie que le délégué gestionnaire de match nouvellement ajouté des éléments, où l'un sans délégation ne sera pas. La délégation, qui a l'avantage qu'il y a moins d'événements accroché dans le navigateur entraîne une diminution de la consommation de mémoire de l'application, cependant la différence est qu'il augmente le temps de traitement d'un clic (un peu). Si vous faites un jeu à ne pas déléguer.
  • La "page de test" vous faites référence n'est pas de travail.
InformationsquelleAutor moey | 2011-11-13
  1. 364

    Cas 1 (direct):

    $("div#target span.green").on("click", function() {...});

    == Hey! Je veux que chaque travée.vert à l'intérieur de la div#cible écoute: quand vous avez cliqué sur, faire X.

    Cas 2 (délégué):

    $("div#target").on("click", "span.green", function() {...});

    == Hey, div#cible! Lorsque l'un quelconque de votre enfant les éléments qui sont "span.vert" get cliqué, faire X avec eux.

    En d'autres mots...

    Dans le cas 1, chacune de ces travées a été individuellement donné des instructions. Si de nouvelles travées sont créés, ils ne l'ont pas entendu l'instruction et ne répondent pas aux clics. Chaque travée est directement responsable pour ses propres événements.

    Dans le cas 2, uniquement le conteneur a été donné l'instruction; il est responsable de remarquer clics au nom de ses éléments enfants. Le travail de la détection d'événements a été délégué. Cela signifie également que l'instruction sera menée pour enfant les éléments qui sont créés à l'avenir.

    • C'est une bonne explication, et a apporté de la clarté d'une question que j'ai longtemps refusé de comprendre. Merci!
    • Alors, pourquoi ne on() permettre à deux arguments quand ce serait à peu près le même que l'utilisation de click()?
    • .sur() est d'un usage général de l'API qui peut gérer tout type d'événement, y compris plusieurs événements différents (vous pouvez mettre plusieurs noms d'événements dans la première chaîne). .cliquez sur() est juste un raccourci pour cette première forme.
    • Aussi, pour ajouter à l'idée de la délégation. Dire à l'avenir, vous avez plus d'éléments appelés "span.vert" a été ajouté à #cible, ceux span.vert déclenche également cette fonction.
    • J'ai une question à ce sujet. Comment puis-je savoir qui span.green est de cliquer dans cette voie?
    • le rappel peut prendre un argument d'événement, et l'événement a une .cible: $("div#cible").on("click", "span.vert", function(event) { // faire quelque chose avec de l'événement.cible });
    • Je vois, Une question de plus. Que diriez-vous si il ya une abondance de span.green alors on est cliqué. Comment puis-je faire certains aiment cette condition: if( not the clicked element ){ // do something } remarque: ils ont tous la même classe.
    • Pouvez-vous reformuler la question?
    • désolé si sa confusion. Compte tenu de cette $("div#target").on("click", "span.green", function() {...});, disons que span.green est de référencement sur 3 éléments span sur div#target et celui qui a été cliqué est le deuxième élément. Comment puis-je faire autre durée de hors la durée (2e extension) qui a été cliqué pour faire quelque chose.
    • Oh, je vois. C'est presque une question distincte, mais vous pourriez faire ceci: $("div#target span.green").not(event.target).whatever()
    • Je vois, donc il y a un .not() fonction. Je vous remercie pour votre aide.
    • sera la première cible de l'événement click (peut être un nœud enfant si span.green a des enfants). De l'intérieur de la gestionnaire, vous devez utiliser le this de référence. Voir ce violon.
    • Une autre remarque à ajouter au sujet de la délégation - c'est à la fois très utile et très efficace. Vous allez utiliser moins de navigateur de ressources avec la délégation vs attacher un événement pour chaque élément correspondant. Pensé que je le mentionne, juste au cas où les gens avaient besoin de plus de raisons d'utiliser la délégation.
    • quid des performances? Est le parent DOM profondeur d'abord cherché à chaque fois qu'il est cliqué?
    • jQuery utilise "remontée d'événements" (voir quirksmode.org/js/events_order.html pour plus de détails), de sorte que les gestionnaires sont effectivement déclenché les enfants d'abord. Donc dans un sens, délégué gestionnaires de causer plus de travail parce que la recherche doit aller de toute façon il en haut de l'arborescence pour trouver le gestionnaire. Cependant: c'est en fait assez rapide, même avec une profonde DOM, et les économies que vous obtenez en termes de ne pas avoir à créer et lier de nouveaux gestionnaires lors de votre DOM changements emporte sur la différence.
    • veuillez droite un livre répondant à des questions sur tous les sujets de ce genre. Pour ceux qui apprennent, ce genre d'analogie, c'est fantastique. J'applaudis cette réponse et ne peux pas vous remercier assez!
    • Si vous lisez la syntaxe suivante dans le api.jquery.com/on et la signification de chaque paramètre, vous trouverez la réponse à votre question: .sur les événements [, selector ] [, données ], gestionnaire ). Comme vous pouvez le voir, le premier paramètre est "événements" et l'explication officielle dit qu'il est de type String, et il ajoute à cette définition: "Un ou plusieurs séparés par des espaces, les types d'événements et en option espaces de noms, tels que "clic" ou "keydown.myPlugin".' Comme N3dst4 a dit dans son commentaire ".sur() est d'un usage général de l'API qui peut gérer tout type d'événement." Le premier paramètre peut être, par exemple: "cliquez sur soumettre".

    InformationsquelleAutor N3dst4
  2. 5

    La première manière, $("div#target span.green").on(), se lie à un gestionnaire de clic directement à l'étendue de mesure(s) qui correspondent au sélecteur au moment où le code est exécuté. Cela signifie que si les autres travées sont ajoutés plus tard (ou ont leur classe changé de match), ils n'ont pas et n'auront pas un gestionnaire de clic. Il signifie aussi, si vous supprimez le "vert" de la classe à partir de l'une des travées son cliquez sur gestionnaire de continuer à fonctionner - jQuery permet de ne pas garder une trace de la façon dont le gestionnaire a été attribué et vérifiez si le sélecteur correspond.

    La deuxième façon, $("div#target").on(), se lie à un gestionnaire de clic à la div(s) qui correspond (encore une fois, c'est contre ceux qui correspondent à ce moment), mais lors d'un clic se produit quelque part dans le div de la fonction de gestionnaire sera exécutée uniquement si le clic s'est produit non seulement dans le div, mais un enfant de l'élément correspondant au sélecteur dans le deuxième paramètre à .on(), "span.vert". Fait de cette façon il n'a pas d'importance lorsque ces enfants travées ont créé, en cliquant sur eux sera toujours lancer le gestionnaire.

    Donc, pour une page qui n'est pas dynamiquement ajout ou la modification de son contenu, vous ne remarquerez pas la différence entre les deux méthodes. Si vous ajoutez dynamiquement enfant supplémentaire des éléments de la deuxième syntaxe signifie que vous n'avez pas à vous inquiéter au sujet de l'attribution des gestionnaires de clic à eux parce que vous avez déjà fait une fois sur le parent.

    InformationsquelleAutor nnnnnn
  3. 4

    L'explication de N3dst4 est parfait. Sur cette base, nous pouvons supposer que tous les éléments enfants sont à l'intérieur du corps, donc nous avons besoin d'utiliser seulement ceci:

    $('body').on('click', '.element', function(){
    alert('It works!')
});

    Il fonctionne avec direct ou délégué d'événement.

    • jquery déconseille l'utilisation de corps, car il est plus lent, parce que le script serait à la recherche pour tous les enfants à l'intérieur du corps, qui doit être beaucoup dans la plupart des cas. C'est mieux (plus rapide) pour utiliser les immédiats conteneur parent de l'élément.
    • Jquery retiré vivre méthode qui était en train de faire la même chose que Vous avez montré. Cette performance est faible et ne devrait pas être utilisé.
    • Dans les navigateurs modernes, $('body').on() délégation de .element devrait se comportent exactement de la même natif document.body.addEventHandler() avec un if (Event.target.className.matches(/\belement\b/)) dans le rappel. Il peut être très légèrement plus lente en jquery grâce à $.proxy généraux, mais de ne pas me citer sur ce point.
    InformationsquelleAutor Brynner Ferreira
  4. 2

    Tangentielle à l'OP, mais le concept qui m'a aidé à démêler la confusion avec cette fonctionnalité est que les éléments liés doivent être les parents de l'élément sélectionné.

    • Lié désigne ce qui est à gauche de la .on.
    • Sélectionné référence à la 2ème argument de .on().

    Délégation ne fonctionne pas comme .find(), la sélection d'un sous-ensemble des éléments liés. Le sélecteur ne s'applique qu'à de strictes éléments enfants.

    $("span.green").on("click", ...

    est très différent de

    $("span").on("click", ".green", ...

    En particulier, pour bénéficier des avantages @N3dst4 laisse avec "les éléments qui sont créés à l'avenir" est lié à l'élément doit être un permanente parent. Ensuite, les enfants sélectionnés peuvent aller et venir.

    MODIFIER

    Liste de pourquoi délégué .on ne fonctionne pas

    Difficile raisons pour lesquelles $('.bound').on('event', '.selected', some_function) peut ne pas fonctionner:

    1. Lié élément n'est pas permanente. Il a été créé après l'appel de .on()
    2. Élément sélectionné n'est pas un bon enfant d'un élément lié. C'est le même élément.
    3. Élément sélectionné empêché bouillonnement d'un événement lié à l'élément en appelant .stopPropagation().

    (En omettant moins délicate raisons, telles que des fautes d'orthographe sélecteur.)

    InformationsquelleAutor Bob Stein
  5. 1

    Je wro te un post avec une comparaison directe des événements et des délégués. Je compare pur js, mais il a le même sens pour jquery qui seulement l'encapsuler.

    Conclusion est que délégué la gestion des événements est dynamique DOM structure où bindings éléments peuvent être créés à tout utilisateur d'interagir avec la page ( pas de nouveau besoin de liaisons ), et de diriger la gestion des événements est statique des éléments du DOM, quand nous savons que la structure ne change pas.

    Pour plus d'informations et une comparaison intégrale -
    http://maciejsikora.com/standard-events-vs-event-delegation/

    En utilisant toujours les délégués des gestionnaires, qui je vois, c'est très à la mode est de ne pas, beaucoup de programmeurs de l'utiliser parce qu'il "devrait être utilisé", mais la vérité est que direct des gestionnaires d'événements sont mieux pour certains de la situation et le choix de la méthode à utiliser doit être pris en charge par la connaissance des différences.

    • si vous l'attachez beaucoup de gestionnaires d'événements (par exemple, chaque ligne d'une table), il est souvent une meilleure performance sage d'utiliser un seul délégué gestionnaire de conteneur au lieu de fixer de nombreux gestionnaires. Vous pouvez voir ce à partir de la base fait que le gestionnaire d'événement comte est par elle-même un profilage de la métrique.
    InformationsquelleAutor Maciej Sikora