Pengendalian Peristiwa Langsung vs. Diwakilkan dalam jQuery: Bilakah Saya Harus Menggunakan Yang Mana?

Pengendalian Acara Langsung lwn. Diwakilkan dengan jQuery .on()

Apabila menggunakan kaedah jQuery .on() untuk pengendalian acara, terdapat ialah perbezaan asas antara pengendali acara langsung dan diwakilkan.

Pengendali acara langsung, seperti yang tersirat dengan nama mereka, lampirkan pendengar acara terus ke elemen tertentu. Contohnya:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

Dalam senario ini, pendengar acara klik terikat terus pada setiap elemen span.green dalam bekas div#target.

Pengendali acara yang diwakilkan, sebaliknya , lampirkan pendengar acara pada elemen induk dan wakilkan pengendalian acara kepada elemen keturunan yang sepadan dengan pemilih. Contohnya:

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

Di sini, pendengar acara klik dilampirkan pada bekas div#target, yang kemudiannya mewakilkan pengendalian klik kepada mana-mana elemen span.hijau keturunan.

Kunci Perbezaannya ialah dalam pengendalian acara yang diwakilkan, pengendali tidak dipanggil jika acara itu berlaku secara langsung pada elemen induk. Sebaliknya, acara menggelembungkan pokok DOM dan pengendali hanya digunakan untuk unsur keturunan yang sepadan dengan pemilih yang disediakan. Ini boleh memberi manfaat untuk kandungan dinamik yang mana elemen baharu boleh ditambah atau dialih keluar, kerana pendengar acara akan digunakan secara automatik pada mana-mana keturunan yang sepadan tanpa memerlukan pengikatan eksplisit.

Dalam contoh yang diberikan, acara langsung dan diwakilkan pengendali menghasilkan tingkah laku yang sama kerana tiada unsur dinamik ditambah atau dialih keluar. Walau bagaimanapun, jika elemen span.green baharu ditambahkan secara dinamik pada halaman, hanya pengendali acara yang diwakilkan akan mengendalikan acara klik mereka.

Atas ialah kandungan terperinci Pengendalian Peristiwa Langsung vs. Diwakilkan dalam jQuery: Bilakah Saya Harus Menggunakan Yang Mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!