Detaillierte Erläuterung der Verwendungsbeispiele der on()-Methode in jQuery_jquery

In diesem Artikel wird die Verwendung der jQuery-on()-Methode anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Verwendung der jQuery on()-Methode:

on(events,[selector],[data],fn)

Ereignisse: Ein oder mehrere durch Leerzeichen getrennte Ereignistypen und optionale Namespaces, z. B. „click“ oder „keydown.myPlugin“.
Selektor: Eine Selektorzeichenfolge für die Nachkommen des Filters des Selektorelements, das das Ereignis ausgelöst hat. Wenn der Selektor null ist oder weggelassen wird, wird das Ereignis immer ausgelöst, wenn es das ausgewählte Element erreicht.
data: Wenn ein Ereignis ausgelöst wird, muss event.data an die Event-Handler-Funktion übergeben werden.
fn: Die Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Der Wert false kann auch als Abkürzung für eine Funktion verwendet werden, die false zurückgibt.

2. Vorteile der jQuery on()-Methode:

1. Bietet eine Methode zur einheitlichen Bindung von Ereignissen

2. Es bietet weiterhin die Vorteile von .delegate(). Natürlich können Sie bei Bedarf auch .bind() direkt verwenden

3. Vergleich mit .bind(), .live(), .delegate():
1. Tatsächlich werden .bind(), .live() und .delegate() alle über .on()
implementiert

Code kopieren Der Code lautet wie folgt:

bind: function(types, data, fn) {

           return this.on(types, null, data, fn );
},
unbind: function(types, fn) {
          return this.off(types, null, fn );
},
live: Funktion( Typen, Daten, Fn) {

jQuery( this.context ).on(types, this.selector, data, fn );
         gib dies zurück;
},
Die: Funktion( Typen, fn ) {
jQuery( this.context ).off(types, this.selector || "**", fn );
         gib dies zurück;
},

Delegat: Funktion( Selektor, Typen, Daten, Fn) {

          return this.on(types, selector, data, fn );
},
​ Undelegate: Funktion(Selektor, Typen, Fn) {
// (Namespace) oder (Selektor, Typen [, fn])
           return arguments.length === 1 ? this.off( selector, "**" ): this.off(types, selector || "**", fn );
}

2. Die Kosten für die Verwendung von .bind() sind sehr hoch. Dadurch wird derselbe Event-Handler an alle passenden DOM-Elemente gebunden

3. Verwenden Sie .live() nicht mehr, es wird nicht mehr empfohlen und bringt viele Probleme mit sich

4. .delegate() bietet eine gute Möglichkeit, die Effizienz zu verbessern, und wir können dynamisch hinzugefügten Elementen eine Ereignisbehandlungsmethode hinzufügen.

5. Wir können .on() verwenden, um die oben genannten drei Methoden zu ersetzen

4. Beispiele für die Verwendung der jQuery on()-Methode

1. Binden Sie das Click-Ereignis und verwenden Sie die Methode off(), um die an on() gebundene Methode zu entfernen

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});

2. Mehrere Ereignisse sind an dieselbe Funktion gebunden

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

3. Binden Sie mehrere Ereignisse an verschiedene Funktionen

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
Klicken Sie auf:function(){$("body").css("background-color","yellow");}
});
});

4. Benutzerdefinierte Ereignisse binden

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! Was für ein wunderschöner Name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5. Daten an Funktion übergeben

Code kopieren Der Code lautet wie folgt:

Function handlerName(event)
{
alarm(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

6. Gilt für nicht erstellte Elemente

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("

Dies ist ein neuer Absatz.

").insertAfter("button");
});
});

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.