Bagaimanakah Perwakilan Acara JavaScript Vanila Berbanding dengan Pendekatan jQuery untuk Prestasi Optimum?

Delegasi Acara dalam JavaScript Vanila untuk Prestasi Optimum

Menyemak Semula Sintaks jQuery

Dalam jQuery, delegasi acara boleh dicapai menggunakan kod berikut:

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

Menterjemah ke Vanila JavaScript

Menggunakan delegasi acara dalam JavaScript vanila boleh dicapai melalui addEventListener. Walau bagaimanapun, adalah penting untuk mengoptimumkan pendekatan untuk kecekapan. Pertimbangkan alternatif berikut:

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

Dengan menggunakan closest(), kami menyemak sama ada elemen yang diklik atau mana-mana nenek moyangnya sepadan dengan pemilih .focused. Ini menghapuskan keperluan untuk berulang secara tidak cekap melalui elemen kanak-kanak.

Mengekalkan Kod Padat

Untuk meningkatkan kekompakan kod, logik utama boleh diletakkan di bawah pernyataan pemulangan awal:

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

  // Code of settingsPanel here
});

Contoh Pelaksanaan

Kod berikut menunjukkan pendekatan:

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

Perhatikan output apabila berinteraksi dengan elemen dengan kedua-dua pengendali acara JavaScript dan jQuery vanila.

Atas ialah kandungan terperinci Bagaimanakah Perwakilan Acara JavaScript Vanila Berbanding dengan Pendekatan jQuery untuk Prestasi Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!