Penjelasan terperinci tentang acara jQuery mengikat pada(), mengikat() dan mewakilkan() kaedah

Penjelasan terperinci tentang acara jQuery mengikat pada(), mengikat() dan mewakilkan() kaedah_jquery

WBOY

Lepaskan： 2016-05-16 15:56:58

asal

1112 orang telah melayarinya

Saya telah mempelajari js untuk seketika dalam proses pembelajaran, saya mendapati bahawa apabila mengikat acara dalam jQuery, sesetengah orang menggunakan bind(), ada yang menggunakan on(), ada yang menggunakan delegate(), dan ada yang menggunakan live. (). Apabila saya melihat kod itu, saya merasakan bahawa fungsi telah dilaksanakan, jadi saya lulus tetapi saya masih tidak memahami sepenuhnya perbezaan antara mereka, jadi saya menyemak maklumat itu hari ini dan membuat ringkasan sendiri. .

Sebab mengapa terdapat begitu banyak jenis kaedah pengikatan adalah kerana versi jQuery dikemas kini Sebagai contoh, kaedah on() muncul selepas 1.7.

Pada halaman api mengikat acara jQuery, disebutkan bahawa kaedah live() sudah lapuk dan tidak disyorkan untuk digunakan. Jadi di sini kita terutamanya melihat tiga kaedah berikut: bind(), delegate(), on()

Kami menyediakan halaman html untuk menguji pelbagai jenis pengikatan acara.

<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>

Salin selepas log masuk

Halaman ringkas dengan div, beberapa elemen p dan butang di dalam div Klik butang untuk menambah elemen p. Seterusnya kita akan mengikat acara klik pada elemen p pada halaman.

ikat()

Penggunaan

Salin kod Kod adalah seperti berikut:

$("div p").bind("klik", fungsi () {

alert($(this).text());

})

Dengan cara ini, acara klik terikat kepada semua elemen p dalam div, dan responsnya adalah untuk memunculkan kandungannya. Pengikatan adalah mudah dan pantas, tetapi terdapat dua masalah di sini:
Soalan pertama ialah kaedah lelaran tersirat digunakan di sini Jika terdapat terlalu banyak elemen yang sepadan, contohnya, jika saya meletakkan 50 p elemen dalam div, saya perlu melakukan pengikatan 50 kali. Untuk sejumlah besar elemen, prestasi terjejas.
Tetapi jika ia adalah pemilih id, kerana id itu unik, ia adalah sangat pantas untuk menggunakan kaedah bind().
Masalah kedua ialah unsur-unsur yang belum wujud tidak boleh terikat. Mengklik butang pada halaman akan menambah elemen p secara dinamik Jika anda mengklik pada elemen p ini, anda akan mendapati tiada tindak balas tindakan.
Kedua-dua masalah ini boleh diselesaikan menggunakan kaedah perwakilan.

Selain itu, terdapat singkatan untuk kaedah bind() Kod di atas juga boleh digantikan dengan:

Salin kod Kod adalah seperti berikut:

$("div p").klik(fungsi () {

alert($(this).text());

})

wakilkan()

Penggunaan

Salin kod Kod adalah seperti berikut:

$("div").delegate("p", "klik", fungsi () {

alert($(this).text());

});

Pendekatan ini menggunakan konsep delegasi acara. Daripada mengikat peristiwa secara terus kepada elemen p, ikat peristiwa kepada elemen induknya (atau elemen nenek moyang juga Apabila anda mengklik pada mana-mana elemen dalam div, acara itu akan menggelembung dari lapisan sasaran acara demi lapisan sehingga ia mencapai The elemen yang anda mengikat acara, seperti elemen div dalam contoh ini. Semasa proses menggelegak, jika Target semasa acara sepadan dengan pemilih, kod akan dilaksanakan.

Ini menyelesaikan dua masalah di atas menggunakan kaedah bind() Tidak perlu mengikat peristiwa pada elemen p satu demi satu. Anda juga boleh mengikat elemen p yang ditambah secara dinamik. Walaupun anda mengikat acara pada dokumen, anda tidak perlu menunggu dokumen itu bersedia untuk melaksanakan pengikatan.

Dengan cara ini, mengikat adalah mudah, tetapi masalah juga mungkin berlaku semasa membuat panggilan. Jika sasaran acara berada sangat dalam dalam pepohon DOM, menggelegak lapisan demi lapisan untuk mencari elemen yang sepadan dengan pemilih akan menjejaskan prestasi.

pada()

on() sebenarnya menyatukan kaedah peristiwa mengikat sebelumnya Melihat pada kod sumber jQuery yang tidak dimampatkan (versi yang saya lihat di sini ialah 1.11.3), anda boleh mendapati bahawa kedua-dua bind() dan delegate() sebenarnya. Apa yang dicapai melalui kaedah on() hanyalah parameternya berbeza.

Salin kod Kod adalah seperti berikut:

 

bind: Funktion( Typen, Daten, Fn) {

Gibt this.on(types, null, data, fn );
 zurück
},

unbind: function(types, fn) {

Gibt this.off(types, null, fn );
 zurück
},

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

Gibt this.on(types, selector, data, fn );
 zurück
}

​ Undelegate: Funktion(Selektor, Typen, Fn) {

// (Namespace) oder (Selektor, Typen [, fn])

Return arguments.length === 1 ? this.off( selector, "**" ): this.off(types, selector || "**", fn );

}

Im obigen Beispiel kann on() wie folgt zum Binden verwendet werden:

Code kopieren Der Code lautet wie folgt:

$("div").on("click","p",function(){

alarm($(this).text());

})

Offizieller Dokumentationsvorschlag:

Ab jQuery 1.7 ist die .on()-Methode die bevorzugte Methode zum Anhängen von Event-Handlern an ein Dokument.

Versuchen Sie, on() zum Binden von Ereignissen zu verwenden.

Ereignis entfernen

entspricht den Bindungsmethoden bind(), delegate() und on(), und die Methoden zum Entfernen von Ereignissen sind:

Code kopieren Der Code lautet wie folgt:

$( "div p" ).unbind( "click", handler );

$( "div" ).undelegate( "p", "click", handler );

$( "div" ).off( "click", "p", handler );

Zusätzlich zum Entfernen der angegebenen Ereignisbindung wie oben können Sie auch alle Ereignisbindungen entfernen, ohne sie einzeln aufzulisten. Die offizielle Dokumentation von jQuery ist sehr detailliert.

Zusammenfassung

1. Wenn viele Elemente mit dem Selektor übereinstimmen, verwenden Sie bind() nicht, um

iterativ zu binden

2. Wenn Sie den ID-Selektor verwenden, können Sie bind()

verwenden

3. Wenn Sie dynamisch hinzugefügte Elemente binden müssen, verwenden Sie „delegate()“ oder „on()“

4. Verwenden Sie die Methoden „delegate()“ und „on()“, und der DOM-Baum sollte nicht zu tief sein

5. Versuchen Sie, on()
zu verwenden

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.