$ (dokument) .on ('click', '#id', function () {}) vs $ ('# id'). on ('click', function () {}) [zamknięte]

Próbowałem dowiedzieć się, jaka jest różnica między

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

i

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

Nie udało mi się znaleźć żadnych informacji o tym, czy jest jakaś różnica między nimi, a jeśli tak, jaka może być ta różnica.

Czy ktoś może wyjaśnić, czy w ogóle jest jakaś różnica?

Pierwszy przykład ilustruje delegowanie zdarzeń . Procedura obsługi zdarzenia jest powiązana z elementem znajdującym się wyżej w drzewie DOM (w tym przypadku document) i zostanie wykonana, gdy zdarzenie osiągnie ten element i pochodzi z elementu pasującego do selektora.

Jest to możliwe, ponieważ większość zdarzeń DOM wypływa w górę drzewa z punktu początkowego. Jeśli klikniesz #idelement, zostanie wygenerowane zdarzenie kliknięcia, które przejdzie przez wszystkie elementy przodków ( uwaga na marginesie: tak naprawdę wcześniej jest faza, zwana `` fazą przechwytywania '', kiedy zdarzenie schodzi w docelowy ). Możesz uchwycić wydarzenie na dowolnym z tych przodków.

Drugi przykład wiąże procedurę obsługi zdarzeń bezpośrednio z elementem. Zdarzenie nadal będzie bąbelkowe (chyba że zapobiegniesz temu w module obsługi), ale ponieważ moduł obsługi jest powiązany z celem, nie zobaczysz efektów tego procesu.

Delegując procedurę obsługi zdarzeń, można zapewnić, że zostanie ona wykonana dla elementów, które nie istniały w DOM w momencie wiązania. Jeśli Twój #idelement został utworzony po drugim przykładzie, program obsługi nigdy nie zostałby wykonany. Powiązanie z elementem, o którym wiesz, że znajduje się na pewno w DOM w momencie wykonywania, daje pewność, że procedura obsługi będzie faktycznie do czegoś dołączona i będzie mogła zostać wykonana w razie potrzeby później.

Rozważ następujący kod

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Oto różnica

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

A co, jeśli ponownie dodamy myTask?

$('#myTask').append('<li>Answer this question on SO</li>');

Kliknięcie tego elementu myTask nie spowoduje usunięcia go z listy, ponieważ nie ma związanych z nim żadnych procedur obsługi zdarzeń. Gdybyśmy zamiast tego użyli .on, nowy element działałby bez dodatkowego wysiłku z naszej strony. Oto jak wyglądałaby wersja .on:

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

Podsumowanie:

Różnica między .on()i .click()może polegać na tym, że .click()może nie działać, gdy elementy DOM powiązane ze .click()zdarzeniem są dodawane dynamicznie w późniejszym czasie, podczas gdy .on()może być używane w sytuacjach, gdy elementy DOM powiązane z .on()wywołaniem mogą być generowane dynamicznie w późniejszym czasie.