Bagaimanakah Perwakilan Acara JavaScript Vanila Meningkatkan Prestasi berbanding Berbilang Pendengar Acara Individu?

Delegasi Acara JavaScript Vanila: Analisis Terperinci

Latar Belakang

Delegasi acara ialah teknik yang digunakan untuk memudahkan pengendalian berbilang pendengar acara yang dilampirkan pada berbeza elemen dalam struktur DOM. Dalam JavaScript vanilla, ini boleh dicapai menggunakan .addEventListener().

Delegasi Acara dalam Vanilla JS

Untuk menterjemah contoh jQuery yang disediakan dalam soalan:

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

... ke dalam JavaScript vanila, kami akan menggunakan:

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

Diperbaiki Penyelesaian

Walau bagaimanapun, untuk mengoptimumkan prestasi dan mengelakkan traversal DOM yang berlebihan, adalah disyorkan untuk menghantar hanya pemilih dalam ke .closest():

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

Memudahkan Struktur Kod

Untuk kebolehbacaan, adalah perkara biasa untuk menyemak keadaan dalam pemulangan awal pernyataan:

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.closest('.focused')) {
    return;
  }
  // Remaining code of settingsPanel here
});

Perbandingan Prestasi

Berbanding dengan penyelesaian alternatif yang disediakan dalam soalan (document.getElementById('main').addEventListener('click', doThis);), ini kaedah menawarkan prestasi yang lebih baik, kerana ia menggunakan acara menggelegak dan mengelakkan lelaran melalui banyak elemen anak dalam #utama.

Demo Langsung

Untuk menggambarkan perbezaannya, anda boleh merujuk kepada coretan demo langsung yang disediakan dalam jawapan. Setelah mengklik elemen dalam (#inner), kedua-dua pengendali acara JavaScript dan jQuery vanila akan log mesej masing-masing ke konsol.

Atas ialah kandungan terperinci Bagaimanakah Perwakilan Acara JavaScript Vanila Meningkatkan Prestasi berbanding Berbilang Pendengar Acara Individu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!