Beispiele für jQuery on()-Methoden und Vorteile von jQuery on() method_jquery

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

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

Mehrere bisher gängige Methoden, die hieraus erweitert wurden, sind:

bind()

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

delegate()

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

live()

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

Die oben genannten drei Methoden werden nach jQuery1.8 nicht mehr empfohlen. Offiziell hat in 1.9 die Verwendung der Methode live() eingestellt Es wird empfohlen, dass alle die Methode on() 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 Ihre Veranstaltung nur einen Vorgang 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, die an dieselbe Funktion gebunden sind

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

Mehrere Ereignisse, die an unterschiedliche Funktionen gebunden sind

$(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 Elemente

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

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

Die Methode 1.on() kann Ereignisse binden, die dynamisch zu Seitenelementen hinzugefügt werden

Beispielsweise müssen sich Ereignisse, die mit der Methode .on() gebunden werden, bei DOM-Elementen, die der Seite dynamisch hinzugefügt werden, nicht darum kümmern, wann das Element hinzugefügt wird, das das Ereignis registriert hat, und sie müssen 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 );
}

Um durch .on() gebundene Ereignisse zu entfernen, verwenden Sie die Methode .off().

2. On()-Methodenbindungsereignisse können die Effizienz verbessern

In vielen Artikeln wurde die Verwendung von Event-Bubbling und Proxys erwähnt, um die Effizienz der Ereignisbindung zu verbessern. In den meisten Artikeln wurden jedoch die spezifischen Unterschiede nicht 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 Ladezeit der Seite 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

Eine normale 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 einen Ereignis-Proxy und registriert nur ein Klickereignis im Dokument. Die Speichernutzung beträgt etwa 2,2 MB und die Bindungszeit beträgt etwa 1 ms.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich ist, die jquery on()-Methode zu lernen.