Jquery live() vs delegate()

Question

Przeczytałem niektóre posty tutaj i gdzie indziej w Internecie o różnicach między live() i delegate(). Jednak nie znalazłem odpowiedzi, której szukam (jeśli to dupe, powiedz mi).

Wiem, że różnica między live a delegate polega na tym, że live nie może być użyty w łańcuchu. Czytałem również gdzieś, że delegate jest w niektórych przypadkach szybszy (lepsza wydajność).

Moje pytanie brzmi, czy istnieje sytuacja, w której należy użyć live zamiast delegate?

UPDATE

mam założyć simple test aby zobaczyć różnicę w wydajności.

Dodałem także nowy .on() która jest dostępna w jQuery 1.7+

Wyniki dość dużo podsumować problemy z wydajnością jak stwierdzono w odpowiedzi.

• Nie używaj .live() chyba wersja jQuery nie obsługuje .delegate().
• Nie używaj .delegate(), chyba że Twoja wersja jQuery nie obsługuje .on().

Różnica .live() i .delegate() jest znacznie większy niż pomiędzy delegate() i .on().

Answer 1

Nigdy nie używam live; Uważam, że korzyści z używania delegate są tak znaczące, że przytłaczają.

Jedną zaletą live jest to, że jego składnia jest bardzo zbliżony do bind:

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

delegate jednak używa nieco bardziej rozwlekły składnię:

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

to jednak Wydaje mi się, że jestem bardziej konkretny o tym, co się naprawdę dzieje. Nie zdajesz sobie sprawy z tego, że zdarzenia są przechwytywane na document; z delegate, jest jasne, że przechwytywanie zdarzeń odbywa się pod numerem #containerElement. Możesz zrobić to samo z live, ale składnia staje się coraz bardziej przerażająca.

Określenie kontekstu zdarzeń do przechwycenia również poprawia wydajność. W przypadku przykładu live każde kliknięcie całego dokumentu należy porównać z selektorem a.myClass, aby sprawdzić, czy pasuje. Z delegate, to tylko elementy w ramach #containerElement. To oczywiście poprawi wydajność.

Wreszcie live wymaga, aby przeglądarka wygląda na a.myClassczy Obecnie istnieje. delegate szuka tylko elementów, gdy zdarzenia są uruchamiane, co daje dodatkową przewagę wydajności.

---

NB delegate wykorzystuje live za kulisy, dzięki czemu można zrobić coś z live, że można zrobić z delegate. Moja odpowiedź dotyczy ich, ponieważ są one powszechnie używane.

Należy również zauważyć, że ani live ani delegate jest najlepszym sposobem na delegowanie zdarzeń w nowoczesnych jQuery. Nowa składnia (jak w jQuery 1.7) jest z funkcją on. Składnia jest następująca:

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

Answer 2

dwóch sytuacjach przychodzą na myśl:

1. Byłbyś użyciu delegate na elemencie body, więc możesz po prostu użyć live zamiast jak to prostsze.

2. Należy użyć starszej wersji biblioteki jQuery, w której zdarzenie delegate nie zostało jeszcze zaimplementowane.

Answer 3

Są dokładnie takie same, z wyjątkiem:

• .delegate() pozwala zawęzić lokalną sekcję strony, natomiast .live() musi przetworzyć zdarzenia w całej strony.
• .live() rozpoczyna się zmarnowanego selekcji DOM

Po wywołaniu .delegate(), po prostu odwraca się i zwraca .live(), ale przechodzi dodatkową kontekstowe parametru.

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

Jako takie, bym zawsze używać .delegate().Jeśli naprawdę potrzebujesz do przetworzenia wszystkich zdarzeń na stronie, po prostu daj mu body jako kontekst.

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

Starsze wersje jQuery rzeczywiście delegate funkcjonalności. Po prostu musisz przekazać selektor lub element jako właściwość kontekstu podczas wywoływania .live(). Oczywiście, musi być załadowany na stronie.

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

Masz takie samo zachowanie, jak .delegate().

Answer 4

Rozważmy następujący przykład

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

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

Przekazując elementu DOM w kontekście naszego selektora, możemy Live() zachowują się (prawie) w ten sam sposób, że delegat() robi. Dołącza moduł obsługi do kontekstu, a nie do dokumentu - który jest domyślnym kontekstem. Poniższy kod jest równoważny z wersją delegate() pokazaną powyżej.

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

Resource

Ale, lepiej użyj delegata dla lepszej wydajności see here