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

Я никогда не использую 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(), но передает дополнительный параметр context.

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() вести себя (почти) так же, как делегат(). Он прикрепляет обработчик к контексту, а не к документу, который является контекстом по умолчанию. Приведенный ниже код эквивалентен показанной выше версии delegate().

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

Ресурс

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