Pengendalian Peristiwa Langsung lwn. Diwakilkan dalam jQuery: Pendekatan `.on()` Mana Yang Perlu Anda Pilih?

Mewakilkan Pengendalian Acara dalam jQuery: Direct vs. Delegated .on()

Kaedah jQuery .on() membenarkan pendaftaran pengendali acara pada elemen DOM. Dua pendekatan berbeza untuk pengendalian acara ialah pengikatan langsung dan diwakilkan. Pengikatan langsung melampirkan pengendali acara secara langsung kepada elemen tertentu, manakala pengikatan yang diwakilkan membenarkan pengendalian acara pada elemen yang sepadan dengan pemilih dalam elemen induk.

Ayat terakhir perenggan yang diberikan berkenaan pengendali acara yang diwakilkan menyatakan bahawa jQuery "berjalan pengendali untuk mana-mana elemen... sepadan dengan pemilih." Ini merujuk kepada mekanisme menggelegak acara dalam DOM.

Apabila pengendali acara yang diwakilkan dilampirkan pada elemen induk menggunakan .on() dengan pemilih, acara dikendalikan bukan sahaja pada elemen yang dipilih tetapi juga pada keturunannya yang sepadan dengan pemilih. Apabila acara itu menggelembungkan pokok DOM, jQuery menyemak sama ada mana-mana elemen di sepanjang laluan sepadan dengan pemilih dan mencetuskan pengendali jika padanan ditemui.

Untuk menggambarkan perbezaan, pertimbangkan contoh berikut:

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

Ini secara langsung mengikat pengendali klik kepada semua elemen dengan kelas hijau dalam div #target. Setiap elemen ini akan mengendalikan acara klik secara bebas.

Sebaliknya, yang berikut menggunakan pengikatan yang diwakilkan:

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

Di sini, pengendali acara klik dilampirkan pada div #target, tetapi pemilih "acara menggelegak" kepada unsur yang sepadan dengan "hijau". Ini bermakna mana-mana masa depan elemen dengan kelas "hijau" yang dibuat dalam div #target juga akan mencetuskan pengendali klik.

Pengikatan yang diwakilkan amat berguna apabila menambah dan mengalih keluar elemen secara dinamik daripada halaman, kerana ia memastikan elemen baharu mewarisi acara mengendalikan tingkah laku tanpa memerlukan pengikatan manual.

Atas ialah kandungan terperinci Pengendalian Peristiwa Langsung lwn. Diwakilkan dalam jQuery: Pendekatan `.on()` Mana Yang Perlu Anda Pilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!