Bagaimanakah Perwakilan Acara dengan `closest()` Boleh Mengoptimumkan Pengendalian Acara JavaScript Vanila?

Delegasi Acara JavaScript Vanila: Pendekatan yang Cekap dan Betul

Delegasi acara ialah teknik biasa dalam JavaScript yang membolehkan anda melampirkan pendengar acara kepada elemen induk tunggal dan mewakilkan pengendalian acara kepada elemen anaknya. Pendekatan ini boleh meningkatkan prestasi dengan ketara dengan mengelakkan penciptaan pendengar acara yang berlebihan untuk setiap anak individu.

Satu cara biasa untuk melaksanakan delegasi acara dalam JavaScript vanila ialah melalui kaedah addEventListener(). Walau bagaimanapun, pelaksanaan yang dinyatakan dalam soalan, yang melibatkan melintasi semua anak #main, tidak optimum untuk prestasi.

Alternatif yang lebih cekap ialah menggunakan kaedah terdekat(), yang menyemak sama ada elemen yang diklik mempunyai elemen induk yang sepadan dengan pemilih yang ditentukan. Ini membolehkan anda mewakilkan acara dengan lebih tepat dan cekap.

Sebagai contoh, untuk menterjemah pengendali acara jQuery ke dalam JavaScript vanila menggunakan closest():

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

Dalam kod ini, kami mula-mula memilih elemen #main dan tambahkan pendengar acara untuk acara 'klik'. Apabila klik berlaku, kami menggunakan closest() untuk menyemak sama ada elemen yang diklik mempunyai elemen induk dengan kelas '.focused'. Jika ia berlaku, kami menggunakan fungsi settingsPanel().

Pendekatan ini cekap kerana ia hanya menyemak elemen yang diperlukan dan tidak memerlukan lelaran melalui semua anak #main. Selain itu, ia mengurangkan kebergantungan yang rapuh dengan merujuk terus elemen sasaran.

Apabila bekerja dengan struktur bersarang dalam, memastikan pemilih dalam juga tidak boleh menjadi elemen induk boleh mengoptimumkan lagi prestasi. Demo langsung dan butiran tambahan mengenai pendekatan ini disediakan dalam bahan rujukan yang diberikan.

Atas ialah kandungan terperinci Bagaimanakah Perwakilan Acara dengan `closest()` Boleh Mengoptimumkan Pengendalian Acara JavaScript Vanila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!