Իվենտների դելեգացումը JavaScript-ում

Նախորդ դասում նկարագրվել է նոր էլեմենտներ ավելացնելիս առաջացող խնդիրը և տրվել է դրա լուծումը։ Այս դասում մենք կդիտարկենք խնդիրը շրջանցելու ավելի հաջող միջոց՝ դելեգացում։ Եկեք այն բացահայտենք։

Ինչպես արդեն գիտեք, կլիկ անելով li-ի վրա, մենք միաժամանակ կլիկ ենք անում նաև ul-ի վրա։ Սա հնարավոր է իվենտների բաբլյուտի շնորհիվ։ Մենք կարող ենք օգտագործել դա մեր խնդիրը լուծելու համար՝ իվենտը կախելու ոչ թե յուրաքանչյուր li-ից, այլ նրանց ծնող ul-ից։

javascriptlist.addEventListener('click', function() {
  
});

Այժմ իվենտի հենդլերում this-ը կցուցադրի այն էլեմենտը, որին կապված է հենդլերը, իսկ event.target-ը՝ այն էլեմենտը, որտեղ տեղի է ունեցել իվենտը։

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // մեր ցուցակը
  console.log(event.target); // ցուցակի կետը
});

Եկեք անենք, որ li-ն, որի վրա տեղի է ունեցել կլիկը, վերջում ավելացնի բացականչական նշան։

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});