Definisi dan penjelasan delegasi acara DOM

Question

Bolehkah seseorang menerangkan delegasi acara dalam JavaScript dan apa yang dilakukannya?

Answer 1

Delegasi acara DOM ialah mekanisme untuk bertindak balas kepada acara UI melalui satu elemen induk biasa dan bukannya setiap elemen anak, yang dicapai melalui keajaiban acara "bergelembung" (juga dikenali sebagai penyebaran peristiwa).

Apabila peristiwa dicetuskan pada elemen, perkara berikut berlaku:

Acara menggelegak menyediakan asas untuk delegasi acara dalam penyemak imbas. Kini anda boleh mengikat pengendali acara kepada elemen induk tunggal, dan setiap kali peristiwa berlaku pada mana-mana nod anaknya, pengendali akan dilaksanakan (bersama-sama dengan anak-anak mereka). Ini adalah delegasi acara. Berikut ialah contoh praktikalnya:

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Dalam contoh ini, jika anda mengklik mana-mana sub <li>节点，您将看到一个"click!"的警告，即使没有将<li>上的点击处理程序绑定。如果我们将onclick="..."绑定到每个<li>, anda akan mendapat kesan yang sama.

Jadi apa faedahnya?

Andaikan anda kini perlu menambah item <li> baharu secara dinamik pada senarai di atas melalui manipulasi DOM:

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

Jika anda tidak menggunakan perwakilan acara, anda perlu mengikat semula pengendali acara "onclick" kepada elemen "onclick"事件处理程序到新的<li>元素上，以使其与其兄弟元素表现相同。使用事件委托，您不需要做任何事情。只需将新的<li> baharu untuk menjadikannya berkelakuan sama seperti adik-beradiknya. Dengan delegasi acara, anda tidak perlu melakukan apa-apa. Cuma tambah

baharu pada senarai dan anda sudah selesai.

Ini bagus untuk aplikasi web yang mempunyai pengendali acara yang terikat kepada banyak elemen, di mana elemen baharu dicipta secara dinamik dan/atau dialih keluar daripada DOM. Dengan perwakilan acara, bilangan pengikatan acara boleh dikurangkan dengan banyak, mengalihkannya ke elemen induk biasa dan kod yang mencipta elemen secara dinamik boleh dipisahkan daripada logik pengendali acara yang mengikatnya.

Satu lagi faedah delegasi acara ialah jumlah jejak memori yang digunakan oleh pendengar acara dikurangkan (kerana bilangan pengikatan acara dikurangkan). Untuk halaman kecil yang kerap dipunggah (iaitu pengguna kerap menavigasi ke halaman yang berbeza), ini mungkin tidak memberi banyak kesan. Tetapi untuk aplikasi tahan lama ia boleh menjadi penting. Terdapat beberapa kes yang sangat sukar untuk dijejaki apabila elemen dialih keluar daripada DOM ia masih menduduki memori (iaitu ia bocor), dan selalunya memori yang bocor ini berkaitan dengan pengikatan peristiwa. Menggunakan delegasi acara, anda boleh memusnahkan elemen kanak-kanak secara bebas tanpa perlu risau tentang terlupa untuk "melepaskan" pendengar acara mereka (memandangkan pendengar menggunakan elemen nenek moyang). Jenis kebocoran memori ini boleh dibendung (jika tidak dihapuskan sepenuhnya, yang kadang-kadang sangat sukar untuk dilakukan. IE, saya sedang melihat anda).

Berikut ialah beberapa contoh kod konkrit delegasi acara yang lebih baik: 🎜

• Cara delegasi acara JavaScript berfungsi
• Perbandingan delegasi acara dan pemprosesan acara
• jQuery.delegate ialah perwakilan acara + spesifikasi pemilih
• jQuery.onGunakan perwakilan acara apabila lulus pemilih sebagai parameter kedua
• Delegasi acara tanpa perpustakaan JavaScript
• Penutupan lwn. Perwakilan Acara: Lihat kelebihan bukan menukar kod anda untuk menggunakan perwakilan acara
• Satu kaedah menarik ditemui oleh PPKDelegasifocus和blurAcara(tidak akan menggelembung)