რა არის დელეგაცია?

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