jQuery désavantages d’utiliser systématiquement ‘live’

Y a-t-il des inconvénients à utiliser le “live” de jQuery de manière cohérente tout au long de ma candidature?

Si j’attache des gestionnaires de clics à tous les éléments que je souhaite et que je décide ensuite de faire mon application AJAX, je devrais passer en revue et append une charge de gestionnaires «actifs» dans mon jQuery.

Je parle de performances et de requêtes HTTP, etc. Quels sont les inconvénients?

Vous ne devriez jamais utiliser live . C’était une erreur de la part de jQuery quand ils l’ont introduit. Utilisez uniquement delegate .

Lors de l’utilisation de live , jQuery devra écouter chaque clic sur le document. Dans la plupart des cas, c’est exagéré. Imagine ça:

 

Maintenant, vous voulez lier un gestionnaire d’événements click sur toutes ces lignes. Si vous allez en live , vous allez faire ceci:

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

Ce qui se passe ici, c’est que chaque fois qu’un élément de la page entière est cliqué, jQuery devra l’exécuter via votre sélecteur (dans ce cas, tr ) pour voir s’il correspond. Cela gaspille beaucoup de ressources sans raison valable. Vous pouvez accomplir la même chose en:

 $('#products').delegate('tr', 'click', function(){...}); 

ce qui fera que jQuery n’écoutera que les événements de clic dans cette table (même s’il continuera d’exécuter cette vérification du sélecteur sur chaque type d’élément cliqué ).

Maintenant, parfois, vous avez vraiment besoin d’écouter les clics sur toute la page. Mais même si vous en avez besoin, vous feriez mieux d’utiliser $(document).delegate('a', 'click', function(){...}); .

Pourquoi?

Imaginez le scénario suivant:

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

Ce que vous faites ici est de parcourir le DOM pour toutes les balises, mais vous ne faites rien avec cette collection. Vous ne faites que ce que vous auriez pu accomplir avec:

 $(document).delegate('a', 'click', function(){...}); 

mais sans traverser le DOM d’abord!


Lectures complémentaires:

http://api.jquery.com/live/#caveats
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/


Mise à jour: avec l’avènement de jQuery 1.7, la nouvelle méthode .on été introduite :

La méthode .on() attache des gestionnaires d’événements à l’ensemble d’éléments actuellement sélectionné dans l’object jQuery. Depuis jQuery 1.7, la méthode .on() fournit toutes les fonctionnalités requirejses pour attacher des gestionnaires d’événements.

Donc, dans nos exemples ci-dessus, vous utiliseriez ceci:

 $('#products').on('click', 'tr', function(){...}); 

et ça

 $(document).on('click', 'a', function(){...}); 

respectivement.

Bien que les anciennes méthodes soient toujours fonctionnelles, c’est maintenant la méthode préférée.

Je peux penser à deux inconvénients:

  1. La liste des avertissements énumérés dans la documentation: http://api.jquery.com/live/#caveats
  2. Pour un développeur inexpérimenté, l’utilisation de .live masque la délégation d’événements en cours. Par conséquent, son fonctionnement peut ne pas être clair, ou peut gêner la compréhension de la délégation d’événements.

En général, cependant, c’est une méthode très pratique. Je vous encourage à prendre le temps de comprendre la délégation d’événements, mais aussi d’utiliser .live chaque fois que cela fait sens.