Optimizimi i Përpunuesve të Ngjarjeve në JavaScript

Numri i tepërt i përpunuesve, të lidhur në elementët konsumon shumë memorie operative dhe çon në ngërçje të faqes.

Le të shohim një shembull. Le të themi se kemi një listë:

html<ul></ul>

Le të marrim një referencë për këtë listë në një ndryshore:

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

Le të plotësojmë listën tonë me taget li, duke lidhur një përpunues klikimi për to:

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);
  });
}

Si rezultat, ne kemi 1000 përpunues. Kjo është shumë. Për optimizim ne mund të lidhim vetëm një përpunues në tagun ul, duke përdorur delegimin.

Le ta bëjmë këtë. Së pari le të krijojmë pikat e listës:

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

Dhe tani le të kryejmë delegimin e përpunuesit të ngjarjeve:

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