O que é delegação?

A delegação de eventos é um padrão de design que permite a um único manipulador de eventos gerir os eventos de múltiplos elementos filhos. Em vez de atribuir um manipulador a cada elemento, o manipulador é atribuído ao elemento pai. Quando ocorre um evento num elemento filho, este "sobe" (bubbling) até ao pai, onde o manipulador pode interceptá-lo e processá-lo.

Princípio de funcionamento:

• O evento é gerado no elemento alvo (por exemplo, <button>).
• O evento propaga-se para cima na árvore DOM até aos elementos pais.
• O manipulador de eventos, ligado ao elemento pai, intercepta o evento.
• No manipulador, pode-se determinar em qual elemento filho ocorreu o evento usando event.target.

Vantagens:

• Performance: Menos manipuladores de eventos, o que reduz o consumo de memória e CPU, especialmente para listas ou tabelas grandes.
• Facilidade de gestão: É mais fácil adicionar e remover elementos do DOM, pois não é necessário ligar/desligar manipuladores constantemente.
• Limpeza do código: Menos código repetitivo para ligar manipuladores.

Exemplo:

Suponha que temos uma lista de elementos e queremos reagir a cliques em cada um.

Sem delegação, teríamos que ligar um manipulador a cada <li>:

// Obter todos os elementos <li>
const listItems = document.querySelectorAll('li');

// Ligar um manipulador a cada elemento
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Clicado em:', this.textContent);
    });
});

Com delegação, ligamos o manipulador apenas ao <ul>:

// Obter a lista pai
const list = document.querySelector('ul');

// Ligar o manipulador à lista
list.addEventListener('click', function(event) {
    // Verificar se o clique foi num elemento <li>
    if (event.target.tagName === 'LI') {
        console.log('Clicado em:', event.target.textContent);
    }
});

Neste exemplo, usamos event.target para determinar qual <li> foi clicado.