Ի՞նչ է դելեգատացիան։

Դատավարության փոխանցումը՝ դա նախագծային ձևաչափ է, որը թույլ է տալիս մեկ իրադարձության մշակողին կառավարել բազմաթիվ երեխաների տարրերի իրադարձությունները: Փոխարենը յուրաքանչյուր տարրին մշակող նշանակելու, մշակողը նշանակվում է ծնողական տարրին: Երբ իրադարձությունը տեղի է ունենում երեխային վրա, այն «վերել է» (bubbling) մինչև ծնողը, որտեղ մշակողը կարող է այն բռնել և մշակել:

Աշխատանքի սկզբունքը:

• Իրադարձությունը ստեղծվում է նպատակային տարրին (օրինակ, <button>):
• Իրադարձությունը տարածվում է DOM ծառի վերև՝ ծնողական տարրերի կողմը:
• Իրադարձության մշակողը, որը կապված է ծնողական տարրին, բռնում է իրադարձությունը:
• Մշակողը կարող է որոշել, թե որ երեխանային տարրին է տեղի ունեցել իրադարձությունը, օգտագործելով event.target:

Առավելությունները:

• Արդյունավետություն: Փոքր թվով իրադարձության մշակողներ, ինչը նվազեցնում է հիշողության և պրոցեսորի սպառումը, հատկապես մեծ ցանկերի կամ աղյուսակների դեպքում:
• Ինքնավար կառավարում: Հեշտ է ավելացնել և հեռացնել տարրեր DOM-ից, քանի որ մշտապես անհրաժեշտ չէ կապել/անջատել մշակողներ:
• Կոդի մաքրություն: Փոքր կրկնվող կոդ՝ մշակողներ կապելու համար:

Օրինակ:

Նախ ասենք, ունենք տարրերի ցանկ, և ուզում ենք արձագանքել յուրաքանչյուր տարրի վրա սեղմմանը:

Անցյալում, առանց փոխանցման, պետք է կապել մշակող յուրաքանչյուր <li>-ին:

// Ստանում ենք բոլոր `<li>` տարրերը
const listItems = document.querySelectorAll('li');

// Կապում ենք մշակող յուրաքանչյուր տարրին
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Սեղմվել է՝', this.textContent);
    });
});

Փոխանցմամբ, մենք կապում ենք միայն <ul>-ին:

// Ստանում ենք ծնողական ցանկը
const list = document.querySelector('ul');

// Կապում ենք մշակողը ցանկին
list.addEventListener('click', function(event) {
    // Ստուգում ենք, արդյոք սեղմումը տեղի է ունեցել `<li>`-ի վրա
    if (event.target.tagName === 'LI') {
        console.log('Սեղմվել է՝', event.target.textContent);
    }
});

Այս օրինակով մենք օգտագործում ենք event.target-ը՝ որոշելու համար, թե որ <li>-ն է սեղմվել։