Number One подключит событие click к элементам, которые существуют при выполнении этого оператора.Например, обработчик напрямую подключается к фактическим элементам, которые совпадают, когда вы выполняете этот вызов.
Номер два перехватит событие click в документе, и при получении любых щелчков проверит, чтобы увидеть,элемент, который был фактически нажат, соответствует любому из заданных селекторов, и в этом случае запустит обработчик.Это делегирование события , а не прямое подключение.
Это означает несколько вещей:
- Используя номер два, нажимает на элементы, которые вы добавляете позже вызовет обработчик;с номером один они не будут.
- Только второстепенные события, такие как
click, работают с номером два (потому что он основан на событии, поднимающем DOM до уровня документа). - Если выиспользуйте делегированный обработчик (номер два), а другой код перехватывает событие для фактического элемента, а затем отменяет распространение (всплывающее) событие, делегированный обработчик его не видит.
- делегированная форма (числоДва) должен сопоставить элемент, который был нажат (и, возможно, его предки), с селектором, когда происходит щелчок, который занимает ненулевое количество времени.Не обязательно много времени, но больше, чем прямой обработчик (который не должен этого делать).Если у вас много делегированных обработчиков в одном и том же элементе (в данном случае в документе), вы можете начать замечать.
Бывают случаи, когда использование обработчика с прямой перехваткой лучше, а иногдакогда делегирование событий (обычно с использованием чего-то более сфокусированного, чем document) лучше.Обычно разделительная линия между ними является оценочным вызовом, но, например, если вы хотите реагировать на щелчки по строкам таблицы, вам, вероятно, лучше перехватить событие click для элемента table с помощью селектора trвместо того, чтобы прикреплять событие click каждой строки таблицы, особенно если вы динамически обновляете таблицу.Если у вас есть уникальная кнопка, которая, как вы знаете, существует в DOM, когда вы подключаете свой обработчик, и вы хотите запустить определенную функцию, когда нажимается эта кнопка (но не что-нибудь еще), прямой обработчик, вероятно, имеет больше смысла.
Вот пример ( живая копия ):
HTML:
<p>Click me</p>
JavaScript:
jQuery(function($) {
$('p').on('click', function() {
display("Directly-attached handler fired. Click this paragraph and note the difference in what happens compared to when you click the 'click me' paragraph.");
});
$(document).on('click', 'p', function() {
display("Delegated handler fired.");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
Обратите внимание, чтопри нажатии на абзац «щелкни меня» к документу добавляются два новых абзаца, один из которых является результатом первого вызова on, а другой - вторым.Но обратите внимание, что если вы щелкнете по любому из этих двух новых абзацев, вы только увидите обработчик из второго on вызова ( делегированный один), а не из первого.Это потому, что эти абзацы не существовали, когда вы подключили первый обработчик.