Was sind die Vorteile der on-Methode in jquery?

Vorteile der on-Methode in jquery: 1. Die on()-Methode kann dynamisch zu Seitenelementen hinzugefügte Ereignisse binden, und die hinzugefügten Ereignishandler sind auf aktuelle und zukünftige Elemente anwendbar. 2. Die on()-Methode kann zugewiesen werden Elemente auf einmal Das Hinzufügen eines oder mehrerer Event-Handler kann die Effizienz verbessern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer. Die

on()-Methode fügt dem ausgewählten Element und den untergeordneten Elementen einen oder mehrere Event-Handler hinzu.

Seit jQuery Version 1.7 ist die on()-Methode der neue Ersatz für die bind()-, live()- und delegate()-Methoden. Diese Methode bringt viel Komfort in die API und wird empfohlen, da sie die jQuery-Codebasis vereinfacht.

Es ist mühsam, Ereignisse für ein einzelnes Element separat zu registrieren

$("p").click(function(){
  $(this).hide();
});
$("p").mouseenter(function(){
  $(this).css("background","blue");
});

Sie können also mehrere Ereignisse gleichzeitig über on registrieren

$("p").on({
  click:function(){
    $(this).hide();
  },
  mouseenter:function(){
    $(this).css("background","blue");
  }
});
 
//还可以合并
$("div").on( "mouseenter mouseleave", function(){
    $(this).toggleclass( "current");
})

Es gibt mehrere Möglichkeiten, Ereignisse mit jQuery zu binden. Es wird empfohlen, .on() zu verwenden. Methode zum Binden. Es gibt 2 Punkte:

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

Zum Beispiel DOM-Elemente, die dynamisch zur Seite hinzugefügt werden Die .on()-Methode muss nicht registriert werden. Wenn das Element dieses Ereignisses hinzugefügt wird, muss die Bindung nicht wiederholt 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.

Mit der on()-Methode hinzugefügte Ereignishandler gelten für aktuelle und zukünftige Elemente (z. B. neue Elemente, die durch Skripte erstellt wurden).

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 );
}

2. Die on()-Methode kann dem Element einen oder mehrere Ereignishandler gleichzeitig hinzufügen, was die Effizienz verbessern kann

Viele Artikel haben erwähnt, dass die meisten von ihnen die spezifischen Unterschiede nicht auflisten, wenn es um die Verwendung von Event-Bubbling und Proxys zur Verbesserung der Effizienz der Ereignisbindung geht. Um dies zu überprüfen, habe ich einen kleinen Test durchgeführt.

Gehen Sie davon aus, dass der Seite 5000 Li hinzugefügt wurden, und testen Sie die Ladezeit der Seite mit dem Chrome-Entwicklertool „Profile“. Gewöhnliche Bindung (nennen wir es so) ca. 4,2 Mio., die Bindungszeit beträgt ca. 72 ms. Die

• .on()-Bindung verwendet den 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.

【Empfohlenes Lernen:
• jQuery-Video-Tutorial
,

Web-Frontend-Video

】

Das obige ist der detaillierte Inhalt vonWas sind die Vorteile der on-Methode in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!