jQuery: разница между .click () и .on («клик») - PullRequest
Новая
       5

jQuery: разница между .click () и .on («клик»)

26 голосов
/ 05 ноября 2011

Я обычно использую 

$(selector).click(...

Но некоторые люди рекомендуют использовать это вместо: 

$(selector).on("click", function(...

Или $(selector).live("click"... (устарело)

Я прочиталруководство, но разум моего начинающего не мог этого понять.Я запутался со всей терминологией, которую они использовали.Я до сих пор не знаю разницу, ни зачем использовать .on()http://api.jquery.com/on/

Ответы [ 3 ]

33 голосов
/ 05 ноября 2011

В конце дня каждое событие связано с некоторым элементом в DOM.В случае .bind вы привязываетесь непосредственно к элементу (или элементам) в вашем объекте jQuery.Например, если ваш объект jQuery содержит 100 элементов, вы будете привязывать 100 прослушивателей событий.

В случае .live, .delegate и .on, single прослушиватель событий связан, как правило, с одним из верхних узлов дерева DOM: document, document.documentElement (элемент <html>) или 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').append('<li>answer all the questions on SO</li>')

Нажатие на этот элемент todo не удалит его из списка, так как к нему не привязаны никакие обработчики событий.Если бы вместо этого мы использовали .on, новый элемент работал бы без каких-либо дополнительных усилий с нашей стороны.Вот как будет выглядеть .on версия: 

$('#todo').on('click', 'li', function (event) {
  $(event.target).remove()
})
12 голосов
/ 05 ноября 2011

В простом .click(..., если цель селектора меняется на лету (например, с помощью некоторого ответа ajax), вам нужно будет снова назначить поведение.

Вкл. .live(... поведение будетбыть автоматически применен к селектору.

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

8 голосов
/ 19 августа 2014

Единственное отличие состоит в том, что .click() будет применяться к элементам, которые существуют в DOM с этим конкретным селектором (только те, которые уже существуют).
В другой руке .on(selector ,"click",callback); будет применен ко всем элементам, которые соответствуют этому селектору, даже в будущем, позвольте мне привести пример: 

$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

Если вы щелкнете по абзацу с надписью «это копия предыдущего абзаца»(новый) вы не получите желаемый результат, который заключается в добавлении абзаца рядом с выбранным, потому что его не было в начале

, но если вы используете 

$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

вы получите то, что хотите (потому что .on или .delegate найдут совпадение даже с новыми)

...