Делегация деген эмне?

Ынтэрфейс делегирлөө — бул дизайн үлгүсү, ал бир иш-чараны иштетүүчү бир нече балдар элементтеринин иш-чараларын башкарууга мүмкүндүк берет. Ар бир элементке иштетүүчүнү белгилөөнүн ордуна, иштетүүчү ата-элементке белгиленет. Балдар элементинде иш-чара болуп калганда, ал "көтөрүлөт" (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> тигилгенин аныктайбыз.