Ответ 1
В конце дня каждое событие привязано к некоторому элементу в DOM. В случае .bind
вы привязываетесь непосредственно к элементу (или элементам) объекта jQuery. Если, например, ваш объект jQuery содержал 100 элементов, вы бы связывали 100 прослушивателей событий.
В случае .live
, .delegate
и .on
, один прослушиватель событий связан, как правило, на одном из самых верхних узлов дерева DOM: document
, document.documentElement
() или document.body
. Поскольку события DOM пузырятся через дерево, обработчик событий, прикрепленный к элементу body
, может фактически получать события кликов, происходящие из любого элемента на странице. Таким образом, вместо того, чтобы связывать 100 событий, вы могли бы связать только один.
Для небольшого числа элементов (например, менее пяти) привязка обработчиков событий напрямую может быть быстрее (хотя производительность вряд ли будет проблемой). Для большего количества элементов всегда используйте .on
.
Другим преимуществом .on
является то, что если вы добавляете элементы в DOM, вам не нужно беспокоиться о привязке обработчиков событий к этим новым элементам. Возьмем, например, список HTML:
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
Далее, некоторые jQuery:
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
Теперь, что, если мы добавим todo?
$('#todo').append('<li>answer all the questions on SO</li>')
Нажатие этого объекта todo не удалит его из списка, поскольку он не связан с обработчиками событий. Если бы мы использовали .on
, новый элемент работал бы без каких-либо дополнительных усилий с нашей стороны. Вот как выглядела бы версия .on
:
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})