Acara selalu menjadi salah satu objek paling kuat dalam JavaScript. JavaScript menyediakan dua metode, addEventListener dan attachmentEvent, untuk mengikat peristiwa ke node DOM. jquery merangkumnya lebih lanjut dan menyediakan metode pengikatan yang kompatibel dengan berbagai browser. Nah, metode pengikatan acara tradisional ini memiliki kekurangan sebagai berikut:
1. Anda mungkin perlu mengikat banyak EventHanders.
Jika ada 100 baris dalam tabel pada halaman, peristiwa klik harus terikat pada setiap baris. Kemudian 100 EventHandlers harus diikat, yang memberikan beban besar pada kinerja halaman karena lebih banyak memori yang perlu dibuat untuk menyimpan Handler ini.
2. Acara tidak dapat ditambahkan setelah diikat ke node DOM.
Jika kode pada halaman tersebut adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
$("#dv").bind('klik',function(){alert('test');});
$(body).append('<div id="dv">tes</div>')
Div yang ditambahkan nanti tidak dapat memicu peristiwa klik.
Untuk mengatasi dua masalah ini, JavaScript memperkenalkan proksi peristiwa (proksi peristiwa). Pertama, mari kita pahami mekanisme penggelembungan di js.
Pada dasarnya semua browser mendukung event bubble. Ketika suatu peristiwa dipicu pada simpul DOM, peristiwa tersebut akan disebarkan hingga ke simpul akar dokumen. Karena semua peristiwa simpul pada akhirnya akan dikirimkan ke simpul akar dokumen, jika kita secara langsung mengikat peristiwa tersebut ke simpul akar dokumen (simpul dokumen), dan kemudian menggunakan event.target untuk menentukan simpul mana yang memicu peristiwa tersebut, apakah ini akan mengurangi banyak EventHandlers? Bagaimana dengan pengikatannya?
Metode live di jquery secara resmi diimplementasikan berdasarkan prinsip ini. Mari kita terapkan versi live yang sederhana:
Copy kode kodenya sebagai berikut:
$.fn.mylive=fungsi(eventType,fn){
var that=ini.pemilih;
$(dokumen).bind(eventType,function(event){
var match=$(event.target).closest(itu)
if(cocok.panjang !== 0){
fn.apply($(acara.target),[acara]);
}
})
}
$("#tb td").mylive('klik',fungsi(acara){
alert(event.target.innerHTML);
});
var tb='<tabel id="tb"> /
<tr> /
<td>kolom pertama</td>/
<td>kolom kedua</td>/
<td>kolom ketiga</td>/
</tr>/
</tabel>';
$("body").append(tb);
Dalam metode live, peristiwa terikat ke node dokumen, dan $(event.target).closest(that) cocok dengan elemen yang sebenarnya memicu peristiwa tersebut. Dalam demo, kami mengikat acara klik untuk setiap TD yang ditambahkan nanti. Saat kami mengklik TD yang berbeda, kami menemukan bahwa kotak teks yang sesuai akan muncul.
Metode langsung menutupi dua kekurangan metode pengikatan acara tradisional yang disebutkan sebelumnya. Namun metode live masih mempunyai kekurangan. Lihat kode ini:
Copy kode kodenya sebagai berikut:
$("#tb td").mylive('klik',fungsi(acara){
alert(event.target.innerHTML);
});
Pertama-tama ia akan melintasi seluruh dokumen berdasarkan pemilih jquery, menemukan semua elemen #tb td, dan menyimpannya sebagai objek. Namun, dalam metode implementasi langsung, objek ini tidak digunakan, tetapi hanya "#td td" yang digunakan sebagai string untuk mencocokkan sumber peristiwa. Hal ini sangat meningkatkan konsumsi yang tidak perlu.
Jadi apakah ada cara untuk memperbaiki situasi ini? Metode proxy delegasi disediakan di jQuery, yang mendukung pengikatan peristiwa ke elemen tertentu, bukan hanya dokumen. Pahami prinsipnya, mari kita terapkan versi delegasi yang sederhana:
Copy kode kodenya sebagai berikut:
$(body).append('<div id="dv"></div>');
$.fn.mydelegate=fungsi(pemilih,eventType,fn){
$(ini).bind(eventType,function(event){
var match=$(event.target).closest(selector);
if(cocok.panjang !== 0){
fn.apply($(acara.target),[acara]);
}
});
}
$("#dv").delegasi saya('td','klik',fungsi(acara){
alert(event.target.innerHTML);
});
var tb='<tabel id="tb"> /
<tr> /
<td>kolom pertama</td>/
<td>kolom kedua</td>/
<td>kolom ketiga</td>/
</tr>/
</tabel>';
$("dv").tambahkan(tb);
Metode mydeletage tidak perlu mendapatkan semua objek td, tetapi hanya objek div yang terikat dengan acara tersebut. Ini lebih baik daripada metode live dalam hal efisiensi eksekusi.
Ini hanyalah pengenalan agar semua orang memahami prinsip proxy acara. Implementasi live dan delegasi di jquery jauh lebih rumit.