Bagaimanakah Saya Boleh Melaksanakan Perwakilan Acara dengan Berkesan dalam JavaScript Vanila?

Delegasi Acara dalam JavaScript Vanila: Panduan Komprehensif

Mencapai delegasi acara dalam JavaScript vanilla menyediakan cara yang cekap dan boleh diselenggara untuk mengendalikan pendengar acara. Tidak seperti delegasi acara jQuery, yang melibatkan pengubahsuaian prototaip terbina dalam, JavaScript vanila menawarkan pendekatan yang lebih mantap melalui penggunaan delegasi acara dengan '.closest()'.

Menterjemah Delegasi Acara jQuery kepada JavaScript Vanila

Untuk menterjemah jQuery contoh:

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

Ke dalam JavaScript vanila, kami menggunakan:

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

Kaedah '.closest()' menyemak sama ada elemen yang diklik mempunyai elemen induk yang sepadan dengan '.focused ' pemilih. Jika ya, ia menggunakan fungsi 'settingsPanel()'.

Pengoptimuman untuk Rangkaian Acara Kompleks

Untuk meningkatkan prestasi, terutamanya apabila berurusan dengan elemen bersarang, pertimbangkan untuk menggunakan pulangan awal:

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

Pendekatan ini menghalang pelaksanaan kod yang tidak perlu apabila '.fokus' pemilih tidak dipadankan.

Demonstrasi Langsung

Coretan kod berikut mempamerkan cara menggunakan perwakilan acara JavaScript vanila dengan '.closest()':

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

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

Dalam contoh ini, mengklik pada elemen '#inner' akan log "vanila" ke konsol, menunjukkan delegasi acara JavaScript vanilla.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Perwakilan Acara dengan Berkesan dalam JavaScript Vanila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!