Propagação e Delegação de Eventos Explicadas

Propagação de Eventos

Propagação de eventos descreve como um evento se move pelo DOM após ser disparado, e possui três fases distintas: Captura, Alvo e Bolha.

Fase de Captura (Capture)

O evento começa na raiz da árvore DOM (window) e desce em direção ao elemento alvo. Os ouvintes de eventos nesta fase capturam o evento enquanto ele se propaga para baixo.

Fase Alvo

O evento alcança o elemento alvo (o elemento que disparou o evento). É neste momento que os ouvintes de eventos anexados ao próprio elemento alvo são executados.

Fase de Bolha (Bubble)

Após alcançar o elemento alvo, o evento começa a subir novamente pela árvore DOM até a raiz (window), passando pelos elementos pai. Esta é a fase mais utilizada, permitindo que elementos pai reajam a eventos disparados por elementos filhos.

O evento se propaga pelo DOM quando o button é clicado. Primeiro, o evento é disparado no button (fase de destino), depois sobe para a div interna e, por fim, para a div externa (fase de propagação).

Delegação de Eventos

Delegação de Eventos é uma técnica que aproveita a propagação de eventos para lidar com eventos de elementos filhos utilizando um único ouvinte de eventos em um elemento pai. Em vez de anexar ouvintes individuais a cada filho, um elemento pai escuta eventos que sobem de seus filhos. Essa abordagem possui duas principais vantagens:

1. Desempenho: Reduzir o número de ouvintes de eventos melhora o desempenho, especialmente em situações onde elementos são criados dinamicamente (por exemplo, uma lista que cresce conforme novos itens são adicionados);
2. Manutenibilidade: A delegação de eventos simplifica o código, especialmente ao trabalhar com grandes estruturas DOM ou conteúdo dinâmico.

Em vez de adicionar ouvintes de clique a cada elemento button individualmente, um único ouvinte é adicionado ao elemento pai div. O evento propaga dos elementos button para o div, onde é tratado.

Abordagem Ruim

Abordagem Boa

Exemplo Prático: Manipulando Lista Dinâmica

A delegação de eventos é ideal para gerenciar interações em listas ou tabelas que podem crescer ao longo do tempo (por exemplo, adicionando tarefas a uma lista de afazeres ou produtos a um carrinho de compras). À medida que itens são adicionados ou removidos, o contêiner pai (como ul ou table) gerencia todas as interações, eliminando a necessidade de adicionar ou remover ouvintes em cada elemento filho.