Beispiele und Vorteile der jQuery on()-Methode

Die Verwendung der jquery on()-Methode zum Binden des -Ereignisses ist eine offiziell empfohlene Methode. Folgen Sie als Nächstes dem Editor, um die jquery on()-Methode zu lernen Machen Sie mit. Lass uns lernen

Die jQuery on()-Methode ist eine offiziell empfohlene Methode zum Binden von Ereignissen.

$(selector).on(event,childSelector,data,function,map)

Mehrere zuvor gängige Methoden, die daraus erweitert wurden, umfassen:

bind()

　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});
　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

Delegate()

$("#p1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});

live()

　　$("#p1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

Die oben genannten drei Methoden funktionieren nach jQuery1.8 Empfohlene Verwendung, offiziell hat die Verwendung der Methode live() in 1.9 eingestellt, daher wird empfohlen, die Methode on() zu verwenden.

Tipp: Wenn Sie die an on() gebundene Methode entfernen müssen, können Sie die Methode off() verwenden.

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

Tipp: Wenn Ihr Event nur eine Operation erfordert, können Sie die one()-Methode

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

trigger ( )Bindung

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

Mehrere Ereignisse an dieselbe Funktion gebunden

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

Mehrere Ereignisse an verschiedene Funktionen gebunden

$(document).ready(function(){
 $("p").on({
  mouseover:function(){$("body").css("background-color","lightgray");}, 
  mouseout:function(){$("body").css("background-color","lightblue");}, 
  click:function(){$("body").css("background-color","yellow");} 
 });
});

Benutzerdefinierte Ereignisse binden

$(document).ready(function(){
 $("p").on("myOwnEvent", function(event, showName){
  $(this).text(showName + "! What a beautiful name!").show();
 });
 $("button").click(function(){
  $("p").trigger("myOwnEvent",["Anja"]);
 });
});

Daten an Funktion übergeben

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

Gilt für nicht erstellte Ereignisse Elemente

$(document).ready(function(){
 $("p").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

Es gibt mehrere Möglichkeiten, Ereignisse mit jQuery zu binden. Es wird aus zwei Gründen empfohlen, die .on()-Methode zum Binden zu verwenden:

1. Die on()-Methode kann dynamisch zu Seitenelementen hinzugefügte Ereignisse binden.

Verwenden Sie beispielsweise DOM-Elemente, die dynamisch zur Seite hinzugefügt werden Durch die Methode on() muss man sich nicht darum kümmern, wann das Element hinzugefügt wird, das das Ereignis registriert hat, und es muss auch nicht wiederholt gebunden werden. Einige Schüler sind möglicherweise daran gewöhnt, .bind(), .live() oder .delegate() zu verwenden. Wenn Sie sich den Quellcode ansehen, werden Sie feststellen, dass sie tatsächlich die Methode .on() und die Methode .live() aufrufen. Methode ist in jQuery1 Version 9 wurde entfernt.

bind:
function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},
live:
function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},
delegate:
function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

Verwenden Sie die Methode .off(), um durch .on() gebundene Ereignisse zu entfernen.

2. Die on()-Methode kann die Effizienz der Ereignisbindung verbessern.

In vielen Artikeln wurde die Verwendung von Event-Bubbling und Proxys erwähnt, um die Effizienz der Ereignisbindung zu verbessern Davon sind keine spezifischen Unterschiede aufgeführt. Um dies zu überprüfen, habe ich einen kleinen Test durchgeführt.

Gehen Sie davon aus, dass der Seite 5.000 Li hinzugefügt werden, und testen Sie die Seitenladezeit mithilfe von Chrome Developer Tools-Profilen.

Normale Bindung (nennen wir es so)

$('li').click(function(){
  console.log(this)
});

Ausführungszeit des Bindungsprozesses

2013-08-13_190358

Gewöhnliche Bindung entspricht der separaten Registrierung von Klickereignissen auf 5000li, die Speichernutzung beträgt etwa 4,2 MB und die Bindungszeit beträgt etwa 72 ms.

.on()-Bindung

$(document).on('click',
'li',
function(){
  console.log(this)
})

Ausführungszeit des Bindungsprozesses

2013-08-13_191010

.on()-Bindung verwendet Ereignis-Proxy, nur ein Klickereignis wird im Dokument registriert, die Speichernutzung beträgt etwa 2,2 MB und die Bindungszeit beträgt etwa 1 ms.

Das obige ist der detaillierte Inhalt vonBeispiele und Vorteile der jQuery on()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!