Jquery live() против делегата ()

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

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

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

ОБНОВИТЬ

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

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

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

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

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

Источник

4 ответа

Решение

Я никогда не пользуюсь 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() начинается с потерянного выбора 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 событие еще не реализовано.

Источник

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

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

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

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

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

Ресурс

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

Источник
Другие вопросы по тегам