JavaScript-ում նոր տարրերի իրադարձությունների մշակման կցում

Ենթադրենք ունենք ul ցուցակ և կոճակ.

html<ul>
  <li>տարր</li>
  <li>տարր</li>
  <li>տարր</li>
  <li>տարր</li>
  <li>տարր</li>
</ul>

<button>ավելացնել</button>

Ստացնենք մեր տարրերը համապատասխան փոփոխականներում.

javascriptlet button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

Եկեք կատարենք, որ ցանկացած li-ի վրա կտտացնելիս դրա վերջում ավելանա բացականչական նշան.

javascriptfor (let item of items) {
  item.addEventListener('click', function() {
    this.textContent = this.textContent + '!';
  });
}

Եկեք հիմա կատարենք, որ կոճակի վրա սեղմելիս ցուցակի վերջում ավելանա նոր li.

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'տարր';
  list.appendChild(item);
});

Սակայն մենք կստանանք խնդիր. նոր ավելացված li-ի վրա կտտացնելը չի հանգեցնի բացականչական նշանի ավելացմանը դրա վերջում: Բանն այն է, որ մենք ավելացնում ենք կտտացման մշակիչ միայն այն li-ների համար, որոնք գոյություն ունեին սկզբնապես, բայց ոչ նորերի համար:

Ուղղենք խնդիրը՝ նոր li-ի վրա ավելացնելով կտտացման մշակիչ.

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'տարր';
  
  item.addEventListener('click', function() { // կտտացման մշակիչ
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

Սակայն, հիմա մշակիչ-ֆունկցիայի կոդը կրկնօրինակվում է երկու տեղում՝ սկզբնապես գոյություն ունեցող li-ների և նորերի համար: Ուղղենք սա՝ այն հանելով առանձին ֆունկցիայի մեջ.

javascriptfunction handler() {
  this.textContent = this.textContent + '!';
}

Օգտագործենք մեր ֆունկցիան՝ կոդի կրկնօրինակումից խուսափելու համար.

javascriptfor (let item of items) {
  item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'տարր';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

Խնդիրը ընդհանուր առմամբ լուծված է, և մենք խուսափեցինք մշակիչ-ֆունկցիայի կոդի կրկնօրինակումից: Սակայն, իրադարձությունների մշակիչների ավելացումը մենք դեռ ստիպված ենք կատարել երկու տեղում. և ցիկլում գոյություն ունեցող li-ների համար, և կոճակի վրա կտտացնելիս: Հաջորդ դասում մենք կքննարկենք այս անհարմարությունից ազատվելու միջոցը: