Jquery live () vs delegate ()

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

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

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

ОБНОВИТЬ

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

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

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

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

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

Я никогда не использую 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() { ... }); 

Они точно такие же, за исключением:

  • .delegate() позволяет сузить локальный раздел страницы, а .live() должен обрабатывать события на всей странице.
  • .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() .

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

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

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

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

 
  • Click Me
$('#items').delegate('li', 'click', function() { $(this).parent().append('
  • New Element
  • '); });

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

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

    Ресурс

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

    Давайте будем гением компьютера.