web-dev-qa-db-fra.com

Jquery live () vs delegate ()

J'ai lu quelques articles ici et ailleurs sur le Web sur les différences entre live() et delegate(). Cependant, je n'ai pas trouvé la réponse que je cherche (si c'est une dupe, dites-le moi).

Je sais que la différence entre live et delegate est que live ne peut pas être utilisé dans une chaîne. J'ai également lu quelque part que delegate est dans certains cas plus rapide (meilleure performance).

Ma question est la suivante: y a-t-il une situation où vous devriez utiliser live au lieu de delegate?

[~ # ~] mise à jour [~ # ~]

J'ai mis en place un test simple pour voir la différence de performance.

J'ai également ajouté la nouvelle .on() qui est disponible dans jQuery 1.7+

Les résultats résument à peu près les problèmes de performances comme indiqué dans les réponses.

  • N'utilisez pas .live() sauf si votre version de jQuery ne prend pas en charge .delegate().
  • N'utilisez pas .delegate() sauf si votre version de jQuery ne prend pas en charge .on().

La différence entre .live() et .delegate() est BEAUCOUP plus grande qu'entre delegate() et .on().

jquerylive
102
PeeHaa

Je n'utilise jamais live; Je considère que les avantages de l'utilisation de delegate sont tellement importants qu'ils sont accablants.

Le seul avantage de live est que sa syntaxe est très proche de celle de bind:

$('a.myClass').live('click', function() { ... });

delegate, cependant, utilise une syntaxe légèrement plus verbeuse:

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

Cela me semble cependant beaucoup plus explicite sur ce qui se passe réellement. Vous ne vous rendez pas compte de l'exemple live que les événements sont réellement capturés sur document; avec delegate, il est clair que la capture d'événement se produit le #containerElement. Vous pouvez faire la même chose avec live, mais la syntaxe devient de plus en plus horrible.

La spécification d'un contexte pour vos événements à capturer améliore également les performances. Avec l'exemple live, chaque clic sur l'ensemble du document doit être comparé avec le sélecteur a.myClass pour voir si cela correspond. Avec delegate, ce ne sont que les éléments dans #containerElement. Cela améliorera évidemment les performances.

Enfin, live nécessite que votre navigateur recherche a.myClass qu'elle existe ou non actuellement . delegate ne recherche les éléments que lorsque les événements sont déclenchés, ce qui donne un avantage supplémentaire en termes de performances.

NB delegate utilise live en arrière-plan, vous pouvez donc faire avec live tout ce que vous pouvez faire avec delegate. Ma réponse les traite car ils sont couramment utilisés.

Notez également que ni live ni delegate n'est le meilleur moyen de faire la délégation d'événements dans jQuery moderne. La nouvelle syntaxe (à partir de jQuery 1.7) est avec la fonction on . La syntaxe est la suivante:

$('#containerElement').on('click', 'a.myClass', function() { ... });
147
lonesomeday

Ils sont exactement les mêmes sauf:

  • .delegate() vous permet de réduire la section locale de la page, tandis que .live() doit traiter les événements dans la page entière.
  • .live() commence par une sélection DOM gaspillée

Lorsque vous appelez .delegate(), il se retourne simplement et appelle .live(), mais transmet le paramètre de contexte supplémentaire .

https://github.com/jquery/jquery/blob/master/src/event.js#L948-95

En tant que tel, j'utiliserais toujours .delegate(). Si vous en avez vraiment besoin pour traiter tous les événements de la page, donnez-lui simplement le body comme contexte.

$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});

Les anciennes versions de jQuery ont en fait la fonctionnalité delegate. Vous avez juste besoin de passer un sélecteur ou un élément comme propriété de contexte lors de l'appel de .live(). Bien sûr, il doit être chargé sur la page.

$('.someClass', '#someContainer').live('click',function() {
    // run handler
});

Et vous avez le même comportement que .delegate().

24
user113716

Deux situations me viennent à l'esprit:

  1. Vous utiliseriez delegate sur l'élément body, donc vous pouvez simplement utiliser live à la place car c'est plus simple.

  2. Vous devez utiliser une ancienne version de la bibliothèque jQuery, où l'événement delegate n'est pas encore implémenté.

3
Guffa

Considérez cet exemple

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

En passant un élément DOM comme contexte de notre sélecteur, nous pouvons faire en sorte que Live () se comporte (presque) de la même manière que delegate (). Il attache le gestionnaire au contexte, pas au document - qui est le contexte par défaut. Le code ci-dessous est équivalent à la version delegate () illustrée ci-dessus.

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
});

Ressource

Mais, vous feriez mieux d'utiliser délégué pour de meilleures performances voir ici

2
Misagh Aghakhani