Rumah > hujung hadapan web > tutorial js > Pengendalian Peristiwa Langsung lwn. Diwakilkan dalam jQuery .on(): Bilakah Saya Perlu Menggunakan Yang Mana?

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

Linda Hamilton
Lepaskan: 2025-01-03 14:55:39
asal
216 orang telah melayarinya

Direct vs. Delegated Event Handling in jQuery .on(): When Should I Use Which?

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() {...});
Salin selepas log masuk

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");
});
Salin selepas log masuk

Pengendalian Acara Diwakilkan

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

$("parent").on("event", "child selector", function() {...});
Salin selepas log masuk

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");
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan