Tapahtumankäsittelijöiden optimointi JavaScriptissä

Liian monet käsittelijät, joita on kiinnitetty elementteihin, kuluttavat paljon muistia ja aiheuttavat sivun jumittumista.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on jokin lista:

html<ul></ul>

Haetaan viite tähän listaan muuttujaan:

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

Täytetään nyt listamme li-tageilla, ja kiinnitetään niihin klikkauskäsittelijä:

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

Lopputuloksena on, että meillä on 1000 käsittelijää. Tämä on erittäin paljon. Optimoidaksemme voimme kiinnittää vain yhden käsittelijän ul-tagiin hyödyntämällä delegointia.

Tehdään tämä. Aluksi luodaan vain listan kohdat:

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

Ja nyt toteutetaan tapahtumien delegointi:

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