Während des Lernprozesses habe ich festgestellt, dass einige Leute beim Binden von Ereignissen in jQuery bind (), einige on (), einige Delegate () und einige Live verwenden (). Als ich mir den Code ansah, hatte ich das Gefühl, dass die Funktionen implementiert waren, also habe ich den Unterschied zwischen ihnen immer noch nicht vollständig verstanden, also habe ich die Informationen heute überprüft und selbst eine Zusammenfassung erstellt .
Der Grund, warum es so viele Arten von Bindungsmethoden gibt, liegt darin, dass die Version von jQuery aktualisiert wird. Beispielsweise erschien die on()-Methode nach 1.7.
Auf der API-Seite zur jQuery-Ereignisbindung wird erwähnt, dass die Methode live() veraltet ist und nicht zur Verwendung empfohlen wird. Daher betrachten wir hier hauptsächlich die folgenden drei Methoden: bind(), Delegate(), on()
Wir bereiten eine HTML-Seite zum Testen verschiedener Arten der Ereignisbindung vor.
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
</script>
</body>
</html>
Eine einfache Seite mit einem div, mehreren p-Elementen und einer Schaltfläche innerhalb des div. Klicken Sie auf die Schaltfläche, um p-Elemente hinzuzufügen. Als nächstes binden wir das Klickereignis an das p-Element auf der Seite.
bind()
Verwendung
Auf diese Weise ist das Klickereignis an alle p-Elemente im div gebunden und die Antwort besteht darin, seinen Inhalt anzuzeigen. Das Binden ist einfach und schnell, allerdings gibt es hier zwei Probleme:
Die erste Frage ist, dass hier die implizite Iterationsmethode verwendet wird, wenn es zu viele übereinstimmende Elemente gibt, wenn ich beispielsweise 50 p-Elemente in ein Div einfüge, muss ich die Bindung 50 Mal durchführen. Bei einer großen Anzahl von Elementen wird die Leistung beeinträchtigt.
Wenn es sich jedoch um einen ID-Selektor handelt, ist die Verwendung der bind()-Methode sehr schnell, da die ID eindeutig ist.
Das zweite Problem besteht darin, dass Elemente, die noch nicht existieren, nicht gebunden werden können. Durch Klicken auf die Schaltfläche auf der Seite wird dynamisch ein p-Element hinzugefügt. Wenn Sie auf dieses p-Element klicken, werden Sie feststellen, dass es keine Aktionsantwort gibt.
Diese beiden Probleme können mit der Delegate-Methode gelöst werden.
Zusätzlich gibt es eine Abkürzung für die bind()-Methode. Der obige Code kann auch ersetzt werden durch:
delegate()
Verwendung
Dieser Ansatz nutzt das Konzept der Ereignisdelegation. Anstatt Ereignisse direkt an das p-Element zu binden, binden Sie Ereignisse an dessen übergeordnetes Element (oder auch an Vorgängerelemente). Wenn Sie auf ein beliebiges Element innerhalb des div klicken, wird das Ereignis Schicht für Schicht vom Ereignisziel nach oben sprudeln, bis es The erreicht Element, an das Sie das Ereignis binden, wie zum Beispiel das div-Element in diesem Beispiel. Wenn während des Bubbling-Prozesses das aktuelle Ziel des Ereignisses mit dem Selektor übereinstimmt, wird der Code ausgeführt.
Dies löst die beiden oben genannten Probleme bei der Verwendung der bind()-Methode. Es ist nicht erforderlich, Ereignisse einzeln an p-Elemente zu binden. Sie können auch dynamisch hinzugefügte p-Elemente binden. Selbst wenn Sie ein Ereignis an ein Dokument binden, müssen Sie nicht warten, bis das Dokument bereit ist, um die Bindung durchzuführen.
Auf diese Weise ist die Bindung einfach, allerdings kann es auch beim Anruf zu Problemen kommen. Wenn sich das Ereignisziel sehr tief im DOM-Baum befindet, wirkt sich das Aufsteigen Schicht für Schicht auf die Suche nach Elementen, die mit dem Selektor übereinstimmen, auf die Leistung aus.
on()
on() vereinheitlicht tatsächlich die vorherigen Bindungsereignismethoden. Wenn Sie sich den unkomprimierten Quellcode von jQuery ansehen (die Version, die ich hier betrachte, ist 1.11.3), können Sie feststellen, dass sowohl bind() als auch Delegate() tatsächlich vorhanden sind Durch die Methode on() wird lediglich erreicht, dass die Parameter unterschiedlich sind.
Dalam contoh di atas, on() boleh digunakan untuk mengikat seperti berikut:
Cadangan dokumentasi rasmi:
Mulai jQuery 1.7, kaedah .on() ialah kaedah pilihan untuk melampirkan pengendali acara pada dokumen.
Cuba gunakan on() untuk mengikat acara.
Alih keluar acara
sepadan dengan kaedah mengikat bind(), delegate() dan on(), dan kaedah untuk mengalih keluar acara ialah:
Selain mengalih keluar pengikatan acara yang ditentukan seperti di atas, anda juga boleh mengalih keluar semua pengikatan acara tanpa memasukkan parameter saya tidak akan menyenaraikannya satu persatu di sini.
Ringkasan
1 Apabila terdapat banyak elemen yang dipadankan oleh pemilih, jangan gunakan bind() untuk mengikat berulang
2. Apabila menggunakan pemilih id, anda boleh menggunakan bind()
3 Apabila anda perlu mengikat elemen yang ditambah secara dinamik, gunakan delegate() atau on()
4. Gunakan kaedah delegate() dan on(), dan pepohon DOM tidak boleh terlalu dalam
5. Cuba gunakan pada()
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
Was sind die JQuery-Plug-Ins?
So bedienen Sie JSON mit JQuery
So löschen Sie Elemente in JQuery
Verwendung der jQuery-Methode hover()
jquery implementiert die Paging-Methode
Was ist ein verstecktes Element in jquery?
Was wird in jquery hervorgehoben?
In Word gibt es eine zusätzliche leere Seite, die ich nicht löschen kann.
