$ (document) .on ('click', '#id', function () {}) vs $ ('# id'). on ('click', function () {}) [закрыто]

Я пытался выяснить, в чем разница между

$(document).on('click', '#id', function(){});

и

$('#id').on('click', function(){});

Мне не удалось найти никакой информации о том, есть ли разница между ними, и если да, то какая это разница.

Может кто-нибудь объяснить, есть ли вообще разница?

Первый пример демонстрирует делегирование события . Обработчик событий привязан к элементу выше по дереву DOM (в данном случаеdocument ) и будет выполняться, когда событие достигает этого элемента, возникшего на элементе, соответствующем селектору.

Это возможно, потому что большинство событий DOM всплывают по дереву из точки происхождения. Если вы щелкнете по #idэлементу, генерируется событие щелчка, которое всплывает через все элементы-предки ( примечание: на самом деле есть фаза перед этим, называемая «фазой захвата», когда событие спускается по дереву до цель ). Вы можете запечатлеть событие на любом из этих предков.

Второй пример связывает обработчик событий напрямую с элементом. Событие по-прежнему будет пузыриться (если вы не предотвратите это в обработчике), но поскольку обработчик привязан к цели, вы не увидите последствий этого процесса.

Делегируя обработчик событий, вы можете обеспечить его выполнение для элементов, которые не существовали в DOM на момент привязки. Если ваш #idэлемент был создан после вашего второго примера, ваш обработчик никогда не будет выполнен. Путем привязки к элементу, который, как вы знаете, определенно находится в DOM во время выполнения, вы гарантируете, что ваш обработчик действительно будет прикреплен к чему-либо и может быть выполнен позже соответствующим образом.

Рассмотрим следующий код

<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()вызовом, могут быть сгенерированы динамически позже.