jQuery.live() и jQuery.bind()

Описание jQuery.live() и почему этот метод быстрее чем jQuery.bind()

Источник

Demystifying jQuery .live() and why it’s generally faster than .bind()

Описание

Метод .live() используется для привязки событий к динамически созданным элементам DOM. Давайте рассмотрим как это работает.

Назначение и обработка событий

В основе работы jQuery.live() лежит довольно оригинальная концепция. Для реализации этого метода используются ‘всплывающие’ события, когда при клике по html-тегу это событие срабатывает для всех родительских элементов, в том числе и для элемента document. jQuery.live() привязывает 1 событие к document, когда вы кликнете по html тегу, событие дойдет до document, где будет произведена проверка, соответствует ли тег тому, на которой был прикреплен обработчик.

Однако этот способ имеет один существенный недостаток, если вы используете ‘всплывающее’ событие для двух элементов, где один потомок другого, то сработают два события. Теоретически можно перехватить распространение события на предка элемента, однако это остановило бы всю цепочку ‘всплывающих’ событий.

Скорость работы при привязке событий по множеству селекторов

Представьте что у вас есть приложение в котором имеется 40 кнопок. Использование метода .live() вместо .bind() для привязки событий даст ощутимый прирост в скорости, особенно при загрузки страницы. Помните что .live() привяжет только одно событие для document, когда для работы .bind() потребуется анализ документа, для привязки события конкретному элементу.

С 40 селекторами при загрузке страницы .live() по сравнению с .bind() дает прирост скорости в 500%. Что еще более удивительно, .live() часто оказывается быстрее непосредственно при вызове функции. В целом, .live() работает быстрее уже при использовании 5 селекторов. Ниже приведено несколько тестов для сравнения скорости работы методов.