Frage $ (Document) .auf ( 'klicken', '#ID', function () {}) vs $ ( '# id'). Auf ( 'Klick', function () {}) [geschlossen]


Ich habe versucht herauszufinden, worin der Unterschied besteht

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

und

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

Ich habe keine Informationen darüber finden können, ob es einen Unterschied zwischen den beiden gibt, und wenn ja, was ist dieser Unterschied?

Kann jemand bitte erklären, ob überhaupt ein Unterschied besteht?


75
2018-02-14 16:14


Ursprung


Antworten:


Das erste Beispiel demonstriert Ereignisdelegierung. Der Event-Handler ist an ein Element oberhalb des DOM-Baums gebunden (in diesem Fall an das document) und wird ausgeführt, wenn ein Ereignis dieses Element erreicht, das von einem Element stammt, das mit dem Selektor übereinstimmt.

Dies ist aufgrund der meisten DOM-Ereignisse möglich Blase den Baum vom Ursprungspunkt nach oben. Wenn Sie auf die Schaltfläche klicken #id Element wird ein Klick-Ereignis generiert, das durch alle VorfahrenelementeRandnotiz: Es gibt tatsächlich eine Phase davor, die "Capture-Phase" genannt wird, wenn das Ereignis vom Baum zum Ziel kommt). Sie können das Ereignis auf einem dieser Vorfahren erfassen.

Das zweite Beispiel bindet den Event-Handler direkt an das Element. Das Ereignis wird weiterhin blasen (es sei denn, Sie verhindern dies im Handler), aber da der Handler an das Ziel gebunden ist, werden die Auswirkungen dieses Prozesses nicht angezeigt.

Indem Sie einen Event-Handler delegieren, können Sie sicherstellen, dass er für Elemente ausgeführt wird, die zum Zeitpunkt der Bindung nicht im DOM vorhanden waren. Wenn dein #id Element wurde nach Ihrem zweiten Beispiel erstellt, Ihr Handler würde niemals ausgeführt werden. Durch die Bindung an ein Element, von dem Sie wissen, dass es sich zum Zeitpunkt der Ausführung definitiv im DOM befindet, stellen Sie sicher, dass Ihr Handler tatsächlich an etwas angehängt wird und später entsprechend ausgeführt werden kann.


58
2018-02-14 16:17



Betrachten Sie den folgenden Code

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

Jetzt, hier geht der Unterschied

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

Was nun, wenn wir wieder myTask hinzufügen?

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

Wenn Sie auf dieses myTask-Objekt klicken, wird es nicht aus der Liste entfernt, da keine Event-Handler gebunden sind. Wenn wir stattdessen gebraucht hätten .on, der neue Artikel würde ohne zusätzlichen Aufwand unsererseits funktionieren. So würde die .on-Version aussehen:

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

Zusammenfassung: 

Der Unterschied zwischen .on() und .click() wäre das .click() funktioniert möglicherweise nicht, wenn die DOM-Elemente, die dem .click() Ereignis wird zu einem späteren Zeitpunkt dynamisch hinzugefügt .on() kann in Situationen verwendet werden, in denen die DOM-Elemente, die mit den .on() Der Aufruf kann zu einem späteren Zeitpunkt dynamisch generiert werden.


11
2018-02-14 16:24