Pengendalian Peristiwa Langsung lwn. Diwakilkan dalam jQuery .on(): Bilakah Saya Perlu Menggunakan Yang Mana?

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

Kaedah jQuery .on() menyediakan dua pilihan untuk pengendalian acara: langsung dan diwakilkan. Dalam konteks pengendalian yang diwakilkan, dokumentasi menyatakan bahawa pengendali acara tidak dipanggil apabila peristiwa berlaku secara langsung pada elemen terikat, tetapi hanya untuk keturunan yang sepadan dengan pemilih. Walau bagaimanapun, ini menimbulkan persoalan tentang apakah sebenarnya yang dimaksudkan dengan "menjalankan pengendali untuk sebarang elemen."

Pengendalian Acara Langsung

Dalam pengendalian acara langsung, pengendali acara diperuntukkan terus kepada elemen menggunakan sintaks berikut:

$("selector").on("event", function() {...});

Dalam kes ini, pengendali acara dilampirkan pada setiap elemen yang sepadan dengan pemilih. Sebagai contoh, kod berikut memberikan pengendali klik kepada setiap elemen dengan kelas hijau dalam

dengan sasaran id:

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

Pengendalian Acara Diwakilkan

Dalam pengendalian acara yang diwakilkan, pengendali acara ditugaskan kepada elemen induk menggunakan sintaks berikut:

$("parent").on("event", "child selector", function() {...});

Dalam kes ini, pengendali acara ditugaskan kepada elemen induk, tetapi ia hanya bertindak balas kepada peristiwa yang berlaku pada unsur keturunan yang sepadan dengan pemilih anak. Pendekatan ini berguna untuk melampirkan pengendali acara pada kandungan dinamik yang tidak hadir apabila halaman mula dimuatkan.

Pertimbangkan contoh berikut:

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

Dalam contoh ini, pengendali klik dilampirkan ke

dengan sasaran id. Walau bagaimanapun, ia hanya bertindak balas kepada klik yang berlaku pada unsur turunan yang elemen dengan kelas hijau.

Kebezaan Utama

Perbezaan utama antara pengendalian acara langsung dan diwakilkan terletak pada hubungan antara elemen sasaran dan elemen yang mengendalikan acara . Dalam pengendalian acara langsung, elemen sasaran juga merupakan elemen yang mengendalikan acara. Dalam pengendalian acara yang diwakilkan, elemen sasaran ialah induk kepada elemen yang mengendalikan acara.

Implikasi Praktikal

Secara amnya, pengendalian acara yang diwakilkan lebih diutamakan apabila bekerja dengan kandungan dinamik yang boleh berubah dari semasa ke semasa. Dengan melampirkan pengendali acara pada elemen induk, anda memastikan acara dikendalikan walaupun elemen baharu ditambahkan pada halaman. Pengendalian acara langsung lebih sesuai untuk kandungan statik yang tidak akan berubah dari semasa ke semasa.

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