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.
index.html
index.css
index.js
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:
- 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);
- Manutenibilidade: A delegação de eventos simplifica o código, especialmente ao trabalhar com grandes estruturas DOM ou conteúdo dinâmico.
index.html
index.css
index.js
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.
index.html
index.css
index.js
1. O que é propagação de eventos?
2. Em qual fase um evento sobe pela árvore DOM após alcançar seu elemento alvo?
3. Por que a delegação de eventos é útil, especialmente com conteúdo dinâmico?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain the difference between capturing and bubbling phases in more detail?
How does event delegation work with dynamically added elements?
Can you provide a code example of event delegation in JavaScript?
Awesome!
Completion rate improved to 2.22Propagação e Delegação de Eventos Explicadas
Deslize para mostrar o menu
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.
index.html
index.css
index.js
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:
- 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);
- Manutenibilidade: A delegação de eventos simplifica o código, especialmente ao trabalhar com grandes estruturas DOM ou conteúdo dinâmico.
index.html
index.css
index.js
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.
index.html
index.css
index.js
1. O que é propagação de eventos?
2. Em qual fase um evento sobe pela árvore DOM após alcançar seu elemento alvo?
3. Por que a delegação de eventos é útil, especialmente com conteúdo dinâmico?
Obrigado pelo seu feedback!
