Wird die on()-Funktion von JQuery Ereignisse wiederholt binden?

JQuery ist eine beliebte JavaScript-Bibliothek, die praktische DOM-Operationen und Ereignisbehandlung in der Front-End-Entwicklung bietet und eines der wesentlichen Werkzeuge in der Webentwicklung ist. Bei der Verwendung von JQuery verwenden wir häufig die Ereignisbindungsfunktion on(). Viele Entwickler stoßen jedoch häufig auf die Frage: Wird die Funktion on() von JQuery Ereignisse wiederholt binden?

Werfen wir zunächst einen Blick auf die Definition und Verwendung der Funktion on():

$(selector).on(event, childSelector, data, function(){...})

Dabei ist Selector das Element, an das das Ereignis gebunden ist, Event ist der gebundene Ereignistyp und childSelector ist das untergeordnete Element Auswahl, die die Ereignisdelegierung deklariert, Daten sind die an den Ereignishandler übergebenen Daten und Funktion ist der gebundene Ereignishandler. Das Funktionsprinzip der Funktion

on() ist: Wenn ein Ereignis ausgelöst wird, wird das vom Selektor übereinstimmende Element vom entsprechenden Ereignishandler verarbeitet. Die Funktion on() fügt den Event-Handler zur Event-Listener-Liste des ausgewählten Elements hinzu.

Was passiert also, wenn wir die Funktion on() mehrmals verwenden, um denselben Ereignistyp zu binden?

Tatsächlich wird bei jedem Aufruf der Funktion on() der Ereignishandler dieses Ereignistyps zur Ereignis-Listener-Liste hinzugefügt, auch wenn derselbe Ereignishandler bereits gebunden wurde. Das bedeutet, dass, wenn wir die on-Methode mehrmals verwenden, um dasselbe Ereignis zu binden, derselbe Ereignishandler wiederholt zur Ereignis-Listener-Liste hinzugefügt wird.

Zum Beispiel bindet der folgende Code das Klickereignis wiederholt:

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

Auf diese Weise führt JQuery jedes Mal, wenn auf das Element geklickt wird, die Ereignishandler dreimal in der Reihenfolge der Bindung aus.

Wenn wir jedoch die Funktion on() verwenden, um einen Event-Handler zu binden, und dann die Funktion off() erneut verwenden, um die Bindung des Event-Handlers aufzuheben, und dann die Funktion on() erneut verwenden, um den Event-Handler zu binden, ist dieses Ereignis Handler-Programme werden nur einmal hinzugefügt. Denn wenn die Funktion „off()“ zum Aufheben der Bindung eines Ereignisses verwendet wird, entfernt JQuery den Ereignishandler aus der Ereignis-Listener-Liste und fügt ihn erst wieder hinzu, wenn die Funktion „on()“ erneut verwendet wird.

So können wir das Problem der wiederholten Bindung von Ereignissen durch die Funktion on() vermeiden, indem wir die Funktion off() verwenden, um die Bindung des Ereignisses aufzuheben.

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

Im obigen Code verwenden wir die Funktion off() im Event-Handler, um die Bindung des Click-Ereignisses aufzuheben. Anschließend wurde ein neues Klickereignis erneut in den Ereignishandler eingebunden und der neue Ereignishandler hinzugefügt.

Zusätzlich zur Verwendung der Funktion off() zum Aufheben der Bindung des Ereignisses, um zu verhindern, dass die Funktion on() das Ereignis wiederholt bindet, können wir natürlich auch eine wiederholte Bindung verhindern, indem wir feststellen, ob das Ereignis bereits in der Ereignis-Listener-Liste vorhanden ist.

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

Im obigen Code verwenden wir die Methode data(), um ein hasBind-Attribut für das Element einzurichten und seinen Anfangswert auf false zu setzen. Beurteilen Sie dann den Wert des hasBind-Attributs. Wenn dieser falsch ist, binden Sie das Ereignis und setzen Sie den Wert des hasBind-Attributs auf true, damit es in Zukunft nicht wiederholt gebunden wird.

Zusammenfassend lässt sich sagen, dass die on()-Methode von JQuery Ereignisse wiederholt bindet. Daher müssen wir die Funktion off() verwenden, um die Bindung des Ereignisses aufzuheben, oder eine wiederholte Bindung verhindern, indem wir feststellen, ob das Ereignis bereits in der Ereignis-Listener-Liste enthalten ist. Dadurch kann das Problem der wiederholten Ausführung beim Binden von Ereignissen besser vermieden und die Effizienz der Front-End-Entwicklung verbessert werden.

Das obige ist der detaillierte Inhalt vonWird die on()-Funktion von JQuery Ereignisse wiederholt binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!