jQuery .on(): Direct vs. Delegated Event Handling – Mana Yang Perlu Anda Pilih?

Direct vs. Delegated: Penyelaman Lebih Dalam ke dalam jQuery .on()

Kaedah jQuery .on() menyediakan dua pendekatan pengendalian peristiwa : langsung dan diwakilkan. Perbezaan utama terletak pada mekanisme penyebaran acara.

Pengendalian Acara Langsung

Apabila menggunakan pengendalian acara langsung, pengendali acara ditetapkan terus kepada elemen sasaran. Ini bermakna bahawa pengendali hanya akan melaksanakan apabila peristiwa berlaku pada elemen tertentu itu. Contohnya:

$("div#target span.green").on("click", function() {
   // Event handler for span.green elements within div#target
});

Dalam contoh ini, hanya elemen span.green dalam div#target akan mencetuskan pengendali klik.

Pengendalian Acara Diwakilkan

Sebaliknya, pengendalian acara yang diwakilkan melampirkan pengendali acara pada elemen induk. Apabila peristiwa berlaku dalam elemen induk, jQuery mewakilkan acara kepada elemen anak yang sepadan dengan pemilih yang ditentukan. Pendekatan ini membolehkan pengendalian acara yang cekap untuk elemen yang mungkin dicipta atau dialih keluar secara dinamik.

$("div#target").on("click", "span.green", function() {
   // Event handler for span.green elements that are descendants of div#target
});

Dalam kes ini, mengklik mana-mana elemen span.green dalam bekas div#target akan menggunakan pengendali acara, walaupun jika elemen telah ditambah selepas acara diwakilkan.

Kunci Perbezaan

• Elemen Sasaran: Pengendalian acara langsung menyasarkan elemen tertentu, manakala pengendalian acara yang diwakilkan menyasarkan elemen berdasarkan pemilih dan laluan penyebaran acara.
• Penciptaan Elemen: Dengan pengendalian acara langsung, elemen yang baru dicipta tidak akan mencetuskan pengendali melainkan mereka terikat secara eksplisit. Pengendalian acara yang diwakilkan memastikan elemen yang dicipta secara dinamik mewarisi pengendalian acara daripada ibu bapa mereka.
• Kekhususan: Pengendalian acara langsung memberikan kekhususan yang lebih tinggi kerana pengendali dilampirkan terus pada elemen sasaran. Pengendalian acara yang diwakilkan memerlukan pemilih untuk memadankan elemen sasaran.

Memahami perbezaan ini adalah penting untuk mengoptimumkan pengendalian acara dalam aplikasi jQuery. Memilih pendekatan yang sesuai bergantung pada keperluan khusus projek dan sama ada penciptaan elemen dinamik merupakan faktor.

Atas ialah kandungan terperinci jQuery .on(): Direct vs. Delegated Event Handling – Mana Yang Perlu Anda Pilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!