Вы читали документацию или искали на этом сайте. Должно быть несколько миллионов ответов на выбор?
adeneo
9
Вы получите ответ «голодных до точек» бегемотов, несмотря на то, что это четко задокументировано. Первый код говорит: «при щелчке по документу, если это что-то с идентификатором #id, запускайте этот код». Второй говорит: «при нажатии на что-либо, существующее в настоящее время с идентификатором #id, запускайте этот код». Первый предназначен для присвоения события элементам, которые не существуют в настоящее время, но будут использоваться в будущем. Второй не сработает ни для каких элементов, добавленных позже.
Восстановить Монику Челлио
6
Я сделал и то, и другое, но, очевидно, недостаточно тщательно. Поиск сложен, потому что я не знал, что искать. Я бы не знал, как это называется.
Styphon
1
Это объясняется в документации для on(). Просто немного
почитайте
8
Если это должно быть закрыто как неконструктивное или из-за того, что для него существует документация, тогда следует закрыть около 99,9% вопросов stackoverflow, и в этом случае удачи в поиске оставшихся 0,1%, поскольку он, вероятно, выйдет из строя. То же самое и с уничижительным замечанием "голодных бегемотов".
cesoid
Ответы:
69
Первый пример демонстрирует делегирование события . Обработчик событий привязан к элементу выше по дереву DOM (в данном случаеdocument ) и будет выполняться, когда событие достигает этого элемента, возникшего на элементе, соответствующем селектору.
Это возможно, потому что большинство событий DOM всплывают по дереву из точки происхождения. Если вы щелкнете по #idэлементу, генерируется событие щелчка, которое всплывает через все элементы-предки ( примечание: на самом деле есть фаза перед этим, называемая «фазой захвата», когда событие спускается по дереву до цель ). Вы можете запечатлеть событие на любом из этих предков.
Второй пример связывает обработчик событий напрямую с элементом. Событие по-прежнему будет пузыриться (если вы не предотвратите это в обработчике), но поскольку обработчик привязан к цели, вы не увидите последствий этого процесса.
Делегируя обработчик событий, вы можете обеспечить его выполнение для элементов, которые не существовали в DOM на момент привязки. Если ваш #idэлемент был создан после вашего второго примера, ваш обработчик никогда не будет выполнен. Путем привязки к элементу, который, как вы знаете, определенно находится в DOM во время выполнения, вы гарантируете, что ваш обработчик действительно будет прикреплен к чему-либо и может быть выполнен позже соответствующим образом.
Хотелось бы узнать, какой из них быстрее делегирует мероприятие. Я хочу улучшить качество своего кода jquery. Поскольку делегирование события из DOM занимает немного времени, чем делегирование события из #Element. Пожалуйста, поделитесь своими мыслями
Arun G
1
@James Allardice - $(document).on('click', $('#id'), function()...как я могу использовать последний метод $(this)для ссылки $('#id')? $(this)в настоящее время ссылается document- я понимаю.
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
А что, если мы снова добавим myTask?
$('#myTask').append('<li>Answer this question on SO</li>');
Щелчок по этому элементу myTask не удалит его из списка, поскольку у него нет привязанных обработчиков событий. Если бы вместо этого мы использовали .on, новый элемент работал бы без каких-либо дополнительных усилий с нашей стороны. Вот как будет выглядеть версия .on:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
Резюме:
Разница между .on()и .click()будет в том, что.click() могут не работать, когда элементы DOM, связанные с .click()событием, динамически добавляются позже, в то время как .on()их можно использовать в ситуациях, когда элементы DOM, связанные с .on()вызовом, могут быть сгенерированы динамически позже.
on(). Просто немногоОтветы:
Первый пример демонстрирует делегирование события . Обработчик событий привязан к элементу выше по дереву DOM (в данном случае
document) и будет выполняться, когда событие достигает этого элемента, возникшего на элементе, соответствующем селектору.Это возможно, потому что большинство событий DOM всплывают по дереву из точки происхождения. Если вы щелкнете по
#idэлементу, генерируется событие щелчка, которое всплывает через все элементы-предки ( примечание: на самом деле есть фаза перед этим, называемая «фазой захвата», когда событие спускается по дереву до цель ). Вы можете запечатлеть событие на любом из этих предков.Второй пример связывает обработчик событий напрямую с элементом. Событие по-прежнему будет пузыриться (если вы не предотвратите это в обработчике), но поскольку обработчик привязан к цели, вы не увидите последствий этого процесса.
Делегируя обработчик событий, вы можете обеспечить его выполнение для элементов, которые не существовали в DOM на момент привязки. Если ваш
#idэлемент был создан после вашего второго примера, ваш обработчик никогда не будет выполнен. Путем привязки к элементу, который, как вы знаете, определенно находится в DOM во время выполнения, вы гарантируете, что ваш обработчик действительно будет прикреплен к чему-либо и может быть выполнен позже соответствующим образом.источник
$(document).on('click', $('#id'), function()...как я могу использовать последний метод$(this)для ссылки$('#id')?$(this)в настоящее время ссылаетсяdocument- я понимаю.Рассмотрим следующий код
<ul id="myTask"> <li>Coding</li> <li>Answering</li> <li>Getting Paid</li> </ul>Теперь вот разница
// Remove the myTask item when clicked. $('#myTask').children().click(function () { $(this).remove() });А что, если мы снова добавим myTask?
$('#myTask').append('<li>Answer this question on SO</li>');Щелчок по этому элементу myTask не удалит его из списка, поскольку у него нет привязанных обработчиков событий. Если бы вместо этого мы использовали
.on, новый элемент работал бы без каких-либо дополнительных усилий с нашей стороны. Вот как будет выглядеть версия .on:$('#myTask').on('click', 'li', function (event) { $(event.target).remove() });Резюме:
Разница между
.on()и.click()будет в том, что.click()могут не работать, когда элементы DOM, связанные с.click()событием, динамически добавляются позже, в то время как.on()их можно использовать в ситуациях, когда элементы DOM, связанные с.on()вызовом, могут быть сгенерированы динамически позже.источник