Quelle est la différence entre .delegate() et live()?

Question

Depuis

$("table").delegate("td", "hover", function(){ 
    $(this).toggleClass("hover"); 
}); 

est équivalent au code suivant écrit en utilisant .live():

$("table").each(function(){ 
    $("td", this).live("hover", function(){ 
     $(this).toggleClass("hover"); 
    }); 
}); 

selon jQuery API.

Je parie que je me trompe, mais est-il pas le même d'écrire

$("table td").live('hover', function() {}); 

Alors, qu'est-ce que est .delegate() pour?

Answer 1

.live() écoutes sur document alors que .delegate() écoute sur un élément plus locale, le <table> dans ce cas.

Ils agissent tous deux de la même manière en écoutant les événements à bulles, celui à .delegate() juste des bulles moins avant d'être attrapé.

Votre exemple:

$("table td").live('hover', function() {}); 

est pas le même, car il attache à nouveau un gestionnaire d'événements à document et non le <table>, donc .delegate() est pour plus des éléments locaux, plus efficaces dans la plupart des points .. .bien qu'il utilise encore .live() sous les couvertures.

---

Gardez à l'esprit que $(selector) récupère les éléments, donc $("table td") sélectionne un tas d'éléments vraiment aucune bonne raison lors de l'utilisation .live(), alors que $("table").delegate() sélectionne seulement les éléments <table>, donc même d'abord, il est plus efficace en n'exécutant pas le sélecteur et en ignorant le résultat.

Answer 2

Le doc:

Puisque la méthode gère .live() des événements une fois qu'ils ont propagé au haut du document, il est impossible d'arrêter la propagation des événements en direct. De même, les événements gérés par .delegate() seront toujours propagés à l'élément auquel ils sont délégués; Les gestionnaires d'événements sur les éléments situés en dessous auront déjà été exécutés au moment où le gestionnaire d'événements délégué est appelé.

Answer 3

Les travaux façon live() est qu'il place un gestionnaire au niveau supérieur du DOM (le document) qui détecte les bulles de votre événement choisi jusqu'à ce niveau (et vérifie ensuite si elle a été lancée par un élément qui correspond à votre sélecteur).

delegate() fonctionne de la même manière, mais le gestionnaire est placé sur votre élément sélectionné (il ne peut donc détecter que les événements lancés par les descendants de cet élément). Les inconvénients de live() sont 1) les problèmes de performances inhérents à la détection et la vérification de tous les événements qui atteignent le niveau du document, et 2) le fait que vous ne pouvez pas arrêter la propagation du tout sur ces événements (puisque vous avez gagné ' Je ne les connais pas jusqu'à ce qu'ils atteignent le niveau du document).

delegate() atténue ces deux problèmes en vous permettant de contraindre le gestionnaire à un plus petit ensemble d'éléments (les éléments qui correspondent à votre sélecteur et leurs descendants) plutôt que la page entière.