O que é JavaScript event delegation (Delegação de eventos JavaScript)?
A delegação de eventos JavaScript é uma técnica poderosa que permite lidar com eventos em elementos filhos através de um único manipulador de eventos em um elemento pai. Em vez de atribuir um manipulador de eventos a cada elemento filho individualmente, a delegação de eventos permite que você atribua um único manipulador de eventos ao elemento pai, que será responsável por lidar com os eventos dos elementos filhos.
Como funciona a delegação de eventos JavaScript?
Quando um evento ocorre em um elemento filho, o evento é propagado para o elemento pai através do que é conhecido como “propagação de eventos”. O manipulador de eventos atribuído ao elemento pai pode então verificar o alvo do evento para determinar qual elemento filho disparou o evento e executar a ação apropriada.
Para implementar a delegação de eventos, você precisa usar o método addEventListener() para atribuir um manipulador de eventos ao elemento pai. Em seguida, dentro do manipulador de eventos, você pode verificar o alvo do evento usando a propriedade event.target e executar a ação desejada com base no elemento filho que disparou o evento.
Vantagens da delegação de eventos JavaScript
A delegação de eventos JavaScript oferece várias vantagens em comparação com a atribuição de manipuladores de eventos individuais a cada elemento filho:
1. Redução de código repetitivo: Com a delegação de eventos, você só precisa atribuir um único manipulador de eventos ao elemento pai, em vez de atribuir um manipulador de eventos a cada elemento filho individualmente. Isso reduz a quantidade de código repetitivo e torna o código mais limpo e fácil de manter.
2. Melhor desempenho: Ao atribuir um único manipulador de eventos ao elemento pai, você evita a sobrecarga de atribuir e remover manipuladores de eventos em cada elemento filho. Isso resulta em um melhor desempenho, especialmente em casos onde há muitos elementos filhos.
3. Flexibilidade: Com a delegação de eventos, você pode adicionar ou remover elementos filhos dinamicamente sem precisar atribuir ou remover manipuladores de eventos. Isso torna o código mais flexível e adaptável a mudanças na estrutura do documento.
Exemplo de uso da delegação de eventos JavaScript
Vamos supor que você tenha uma lista de itens e deseja executar uma ação quando um item for clicado. Em vez de atribuir um manipulador de eventos a cada item individualmente, você pode usar a delegação de eventos para atribuir um único manipulador de eventos à lista:
const lista = document.querySelector('.lista');
lista.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
// Executar ação quando um item da lista for clicado
}
});
Neste exemplo, o manipulador de eventos é atribuído ao elemento pai com a classe “lista”. Quando um item da lista é clicado, o manipulador de eventos verifica se o alvo do evento é um elemento “LI” e executa a ação desejada.
Conclusão
A delegação de eventos JavaScript é uma técnica poderosa que permite lidar com eventos em elementos filhos através de um único manipulador de eventos em um elemento pai. Ela oferece vantagens como redução de código repetitivo, melhor desempenho e flexibilidade. Ao usar a delegação de eventos, você pode escrever um código mais limpo, eficiente e adaptável a mudanças na estrutura do documento.
