JavaScriptда ишлов беришчиларнинг оптималлаштирилиши

Ҳаддан ташқари кўп ишлов беришчилар, элементларга бириктирилган, кўп оператив хотирани ейди ва саҳифанинг секин ишлашига олиб келади.

Келгила, мисолда кўрайлик. Фароз қилайлик, бизда маълум рўйхат бор:

html<ul></ul>

Ушбу рўйхатга ҳаволани ўзгарувчига оламиз:

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

Энди бизнинг рўйхатимизни li теглари билан тўлдирамиз, уларга клик ишлов беришчисини бириктириб:

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

Натижада, бизда 1000 ишлов беришчи бор. Бу жуда кўп. Оптималлаштириш учун биз фақат битта ишлов беришчини ul тегига бириктиришимиз мумкин, делегатлашдан фойдаланиб.

Бунни қилайлик. Аввало, оддийгина рўйхат элементларини яратамиз:

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

Энди ишлов беришчиларни делегатлашни бажарамиз:

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