Bagaimanakah Delegasi Acara Dapat Meningkatkan Prestasi JavaScript Vanila dan Kesederhanaan Kod?

Delegasi Acara dengan JavaScript Vanila

Dalam JavaScript vanila, perwakilan acara ialah teknik yang digunakan untuk melampirkan pendengar acara kepada elemen induk tunggal dan bukannya elemen individu di dalamnya. Pendekatan ini meningkatkan prestasi dengan menghapuskan keperluan untuk berbilang pendengar acara dan memudahkan kod.

Delegasi Acara Berkesan

Untuk melaksanakan delegasi acara dengan cekap, gunakan langkah berikut:

1. Cari elemen induk di mana acara akan berlaku berlaku.
2. Tambahkan pendengar acara pada elemen induk untuk jenis acara yang diingini (cth., klik).
3. Di dalam pengendali acara, semak sama ada elemen yang diklik sepadan dengan pemilih tertentu atau induknya elemen sepadan dengan pemilih.
4. Jika syarat dipenuhi, laksanakan fungsi yang diingini atau tindakan.

Contoh: Mewakilkan Kod jQuery

Pertimbangkan kod jQuery berikut:

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

Untuk menterjemah kod ini kepada JavaScript vanila , gunakan yang berikut:

document.querySelector('#main').addEventListener('click', (e) => {
    if (e.target.closest('.focused')) {
        settingsPanel();
    }
});

Dalam kod ini, kami menggunakan querySelector() untuk mencari elemen induk dengan ID utama dan lampirkan pendengar acara klik padanya. Apabila elemen dalam induk ini diklik, ia menyemak sama ada elemen yang diklik atau mana-mana elemen induknya mempunyai kelas .fokus. Jika ya, ia menggunakan fungsi settingsPanel().

Faedah Mewakilkan:

• Peningkatan prestasi: Menghapuskan keperluan untuk berbilang pendengar acara, mengurangkan bilangan pengendalian acara fungsi.
• Kod ringkas: Lebih mudah untuk dikekalkan dan difahami berbanding menggunakan pendengar acara individu untuk setiap elemen.
• Fleksibiliti: Membolehkan pengikatan dinamik pengendali acara berdasarkan pemilih, membolehkan anda mengendalikan acara daripada elemen yang boleh ditambah atau dialih keluar secara dinamik.

Atas ialah kandungan terperinci Bagaimanakah Delegasi Acara Dapat Meningkatkan Prestasi JavaScript Vanila dan Kesederhanaan Kod?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!