JQuery live() vs delegate()

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

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

Мой вопрос: есть ли ситуация, когда вы должны использовать live вместо delegate?

UPDATE

Я установил простой тест, чтобы увидеть разницу в производительности.

Я также добавил новый .on(), который доступен в jQuery 1.7 +

Результаты в значительной степени суммируют проблемы производительности, как указано в ответах.

  • Не используйте .live(), если ваша версия jQuery не поддерживает .delegate().
  • Не используйте .delegate(), если ваша версия jQuery не поддерживает .on().

Разница между .live() и .delegate() равна A LOT больше, чем между delegate() и .on().

Ответы

Ответ 1

Я никогда не использую live; Я считаю, что преимущества использования delegate настолько значительны, чтобы быть подавляющим.

Единственное преимущество live заключается в том, что его синтаксис очень близок к синтаксису bind:

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

delegate, однако, использует несколько более подробный синтаксис:

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

Это, однако, мне кажется гораздо более ясным о том, что на самом деле происходит. Вы не понимаете из примера live, что события фактически фиксируются на document; с delegate, ясно, что захват события происходит на #containerElement. Вы можете сделать то же самое с live, но синтаксис становится все более ужасным.

Задание контекста для захваченных событий также повышает производительность. С примером live каждый отдельный клик по всему документу должен быть сопоставлен с селектором a.myClass, чтобы увидеть, совпадает ли он. С delegate, это только элементы внутри #containerElement. Это, очевидно, улучшит производительность.

Наконец, live требует, чтобы ваш браузер искал a.myClass , существует ли он в настоящее время. delegate ищет элементы только при срабатывании событий, что дает дополнительное преимущество в производительности.

NB delegate использует live за кулисами, поэтому вы можете сделать что-либо с live, которое вы можете сделать с помощью delegate. Мой ответ касается их, поскольку они обычно используются.

Обратите внимание также, что ни live, ни delegate - лучший способ делегирования событий в современном jQuery. Новый синтаксис (как и jQuery 1.7) с функцией on. Синтаксис выглядит следующим образом:

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

Ответ 2

Они точно такие же, кроме:

  • .delegate() позволяет сузить локальный раздел страницы, а .live() - обрабатывать события на всей странице.
  • .live() начинается с отложенного выбора DOM

Когда вы вызываете .delegate(), он просто поворачивается и вызывает .live(), но передает дополнительный параметр контекста.

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

Как таковой, я всегда буду использовать .delegate(). Если вам действительно нужно обработать все события на странице, просто укажите body как контекст.

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

Более старые версии jQuery действительно имеют функциональность delegate. Вам просто нужно передать селектор или элемент в качестве свойства контекста при вызове .live(). Конечно, его нужно загружать на страницу.

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

И у вас такое же поведение, как .delegate().

Ответ 3

Приходят в голову две ситуации:

  • Вы использовали бы delegate в элементе body, так что вместо этого вы можете просто использовать live, как это проще.

  • Вам нужно использовать более старую версию библиотеки jQuery, где событие delegate еще не реализовано.

Ответ 4

Рассмотрим этот пример

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

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

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

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

Ресурс

Но вам лучше использовать делегат для лучшей производительности см. здесь