Pengoptimuman Pengendali Peristiwa dalam JavaScript

Terlalu banyak pengendali, yang dilekatkan pada elemen, memakan banyak memori RAM dan menyebabkan halaman menjadi lambat.

Mari kita lihat contoh. Katakan kita mempunyai senarai tertentu:

html<ul></ul>

Dapatkan rujukan kepada senarai ini dalam pembolehubah:

javascriptlet ul = document.querySelector('ul');

Sekarang isi senarai kita dengan tag li, dengan melekatkan pengendali klik pada mereka:

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
  
  li.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

Hasilnya, kita mempunyai 1000 pengendali. Ini sangat banyak. Untuk pengoptimuman kita boleh melekatkan hanya satu pengendali pada tag ul, dengan menggunakan delegasi peristiwa.

Mari kita lakukan ini. Pertama, hanya buat item senarai:

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
}

Dan sekarang laksanakan delegasi pengendali peristiwa:

javascriptul.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    console.log(li.textContent);
  }
});