Zusammenfassung der Ereignisbindung in Jquery

Vorwort

Da JQuery häufig zum Hinzufügen und Löschen von Dom-Elementen verwendet wird, umfasst es die Bindungsereignismethode von Dom-Elementen. Zum späteren Nachschlagen und ich hoffe auch, dass dieser Artikel Freunden in Zukunft helfen kann. Wenn etwas nicht stimmt, hoffe ich, es darauf hinweisen und kommunizieren zu können.

One.bind()

Kurze Beschreibung

bind() fügt dem passenden Element einen oder mehrere Event-Handler hinzu.

Verwendung

$(selector).bind(event,data,function)

event: erforderlich; ein oder mehrere Ereignisse, die einem Element hinzugefügt wurden, z. B. click , dblclick usw.;

Verarbeitung einzelner Ereignisse: zum Beispiel $(selector).bind("click",data,function);

Verarbeitung mehrerer Ereignisse: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen , zum Beispiel $(selector).bind("click dbclick mouseout",data,function);

2. Verwenden Sie geschweifte Klammern, um flexibel mehrere Ereignisse zu definieren, wie zum Beispiel $(selector).bind({event1:function , event2:function , ...})

3. Die Bindung ist relativ starr und Funktionen können nicht separat an Ereignisse gebunden werden. Sie eignet sich für die Verarbeitung mehrerer Ereignisse, die dieselbe Funktion aufrufen >

Klammerersatzmethode: Die Bindung ist flexibler. Sie können Funktionen separat an Ereignisse binden.

Daten: optional; Parameter, die übergeben werden müssen; Wenn ein Bindungsereignis auftritt, muss die Funktion ausgeführt werden.

gilt für die JQuery-Version.

gilt für alle Versionen. Laut der offiziellen Website gilt jedoch seit der JQuery-Version 1.7 die Funktion bind(). Es wird empfohlen, die Funktion durch on() zu ersetzen.

2. Live()

Kurze Beschreibung

live() fügt einen oder mehrere Event-Handler zu den aktuellen oder zukünftigen passenden Elementen hinzu; >Verwendung

$(selector).live(event,data,function)

event: erforderlich; ein oder mehrere dem Element hinzugefügte Ereignisse, z. B. click, dblclick usw. ;

Verarbeitung einzelner Ereignisse: zum Beispiel $(selector).live("click",data,function);

Verarbeitung mehrerer Ereignisse: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B. $( selector ).live("click dbclick mouseout",data,function);

2. Verwenden Sie geschweifte Klammern, um mehrere Ereignisse flexibel zu definieren, z. B. $(selector).live({event1:function, event2:function, .. .})

3. Die Bindung ist relativ starr und kann Funktionen nicht separat binden. Sie eignet sich für die Behandlung mehrerer Ereignisse, die dieselbe Funktion aufrufen.

Alternative Methode mit Klammern : Bindung Die Einstellung ist flexibler und Sie können Funktionen separat an Ereignisse binden.

Daten: optional; die Funktion, die ausgeführt werden muss Wenn das Bindungsereignis auftritt;

Anwendbare Jquery-Version

Jquery1.9 und höher haben diese Methode gelöscht stattdessen.

3.delegate()

Kurze Beschreibung

delegate() fügt einen oder mehrere Event-Handler zum angegebenen Element (untergeordnete Elemente des ausgewählten Elements) hinzu und geben Sie Funktionen an, die ausgeführt werden sollen, wenn diese Ereignisse auftreten. Ereignishandler, die die Methode „delegate()“ verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die von einem Skript erstellt wurden).

Verwendung

$(selector).delegate(childSelector,event,data,function)

childSelector: erforderlich; ein Element, das einen Ereignishandler hinzufügen muss, normalerweise Child Elemente des Selektors;

Ereignis: erforderlich; ein oder mehrere Ereignisse, die dem Element hinzugefügt wurden, z. B. click, dblclick usw.;

Einzelne Ereignisverarbeitung: z. B. $(selector).delegate ( childselector,"click",data,function);

Verarbeitung mehrerer Ereignisse: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B. $(selector).delegate(childselector,"click dbclick mouseout",data, Funktion);

2. Verwenden Sie geschweifte Klammern, um mehrere Ereignisse flexibel zu definieren, z. B. $(selector).delegate(childselector,{event1:function, event2:function, ...})　

3. Leerzeichen trennen Methode: Die Bindung ist relativ starr und Funktionen können nicht separat an Ereignisse gebunden werden. Sie eignet sich für die Verarbeitung mehrerer Ereignisse, die dieselbe Funktion aufrufen.

Alternative Methode mit geschweiften Klammern: Die Bindung ist flexibler und Funktionen können nicht individuell an Ereignisse gebunden sein;

Funktion: erforderlich; Funktion, die ausgeführt werden muss, wenn das Bindungsereignis auftritt; >Anwendbare JQuery-Version

jquery1.4.2 und höher;

IV.on()

Kurze Beschreibung

on() fügt einen oder mehrere Event-Handler hinzu für das angegebene Elementprogramm und geben Sie Funktionen an, die ausgeführt werden sollen, wenn diese Ereignisse auftreten. Ereignishandler, die die on()-Methode verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die von einem Skript erstellt wurden).

Verwendung

$(selector).on(event,childselector,data,function)

event: ein oder mehrere dem Element hinzugefügte Ereignisse, z. B. click, dblclick usw.;

Einzelereignisverarbeitung: Zum Beispiel $(selector).on("click",childselector,data,function);

Mehrfachereignisverarbeitung: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B. $(selector).on("click dbclick mouseout",childseletor,data,function);

2. Verwenden Sie geschweifte Klammern, um mehrere Ereignisse flexibel zu definieren, z. B. $(selector ).on({event1 :function, event2:function, ...},childselector);

3. Die Bindung ist relativ starr und kann keine separaten Funktionen an Ereignisse binden mehrere Ereignisse, die dieselbe Funktion aufrufen;

Klammeralternative: Die Bindung ist flexibler und kann Funktionen einzeln an Ereignisse binden

childSelector: optional; das Element, das einen Ereignishandler hinzufügen muss, normalerweise ein untergeordnetes Element des Selektors;

Funktion: erforderlich; wenn Funktion, die ausgeführt werden muss, wenn ein Bindungsereignis auftritt;

Gilt für JQuery-Version

JQuery1.7 und höher, wird verwendet, um Bindung zu ersetzen (), live() Bindungsereignismethoden;

5. Ähnlichkeiten, Unterschiede, Vor- und Nachteile der vier Methoden

Gleiche Punkte:

1 von einzelnen Elementen und mehreren Ereignissen; getrennt durch Leerzeichen-Methode oder Klammer-Ersetzungsmethode; 2. Beide übergeben Ereignisse an das Dokument zur Ereignisantwort 🎜>

1. Die Funktion „bind()“ kann nur Ereignisse für vorhandene Elemente festlegen, aber „live()“, „on()“ und „delegate()“ unterstützen alle Ereigniseinstellungen für neu hinzugefügte Elemente; >2.bind Die Funktion () war vor der Veröffentlichung von Version 1.7 relativ beliebt. Die alternative Funktion ist on(), ebenfalls eine neu hinzugefügte Funktion , Sie können

Wird verwendet, um die Funktion live() zu ersetzen, die in Version 1.9 gelöscht wurde

3. Die Funktion live() ähnelt der Funktion delegate(), aber die Die Funktion live() ist schneller in der Ausführung.

4.bind() unterstützt alle Versionen von Jquery in Bezug auf Flexibilität und CSS-Selektorunterstützung () unterstützt jquery1.4.2+; on() Unterstützt jquery1.7+; Zusammenfassung

Wenn es sich bei der im Projekt referenzierten JQuery-Version um eine niedrigere Version handelt, wird die Verwendung empfohlen Für höhere Versionen von jquery kann stattdessen nur on() verwendet werden. Dies ist meine persönliche Meinung. Wenn Sie andere Ideen haben, können Sie diese gerne mitteilen.