$ (document) .on ('click', '#id', function () {}) vs $ ('# id'). on ('click', function () {}) [closed]

Я намагався з'ясувати, в чому різниця між

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