В чем разница между .delegate () и live ()?

Question

Начиная с

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

Эквивалентно следующему коду, написанному с использованием .live ():

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

в соответствии с jQuery API .

Могу поспорить, что я не прав, но это не то же самое, что писать

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

Итак, для чего нужен .delegate()?

Answer 1

Способ работы live() состоит в том, что он помещает обработчик на верхний уровень DOM (документа), который обнаруживает, когда выбранное событие всплывает до этого уровня (а затем проверяет, было ли оно выброшено элементомсоответствует вашему селектору).

delegate() работает так же, но обработчик помещается в выбранный вами элемент (поэтому он может обнаруживать только события, выброшенные потомками этого элемента).

Недостатками live() являются: 1) проблемы с производительностью, присущие обнаружению и проверке всех событий, относящихся к уровню документа, и 2) тот факт, что вы вообще не можете остановить распространение этих событий (поскольку вы не будете знать,о них, пока они не достигнут уровня документа).

delegate() смягчает обе эти проблемы, позволяя ограничить обработчик меньшим набором элементов (элементов, которые соответствуют вашему селектору и их потомкам), а невся страница.

Answer 2

.live() прослушивает document, где .delegate() прослушивает более локальный элемент, в данном случае <table>.

Ониоба действуют одинаково, слушая, как события всплывают, а тот, который .delegate() просто пузырится меньше, пока его не поймают.

Ваш пример:

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

Не то же самое, что ион снова присоединяет обработчик событий к document, а не к <table>, поэтому .delegate() предназначен для большего количества локальных элементов, в большинстве случаев более эффективен ... хотя он все еще использует .live() под одеялом.

---

Также имейте в виду, что $(selector) извлекает элементы, поэтому $("table td") действительно выбирает группу элементов без особой причины при использовании .live(), где$("table").delegate() выбирает только <table> элементов, поэтому даже на начальном этапе это более эффективно, если не запускать селектор и не отбрасывать результат.

Answer 3

Док:

Поскольку метод .live () обрабатывает события после их распространения в верхней части документа, невозможно остановить распространение живых событий. Аналогично, события, обрабатываемые .delegate (), всегда будут распространяться на элемент, которому они делегированы; Обработчики событий для любых элементов ниже этого будут уже выполнены к тому времени, когда вызывается делегированный обработчик событий.