Ao falar sobre os principais conceitos do JavaScript , ao trabalhar com desenvolvimento de interface do usuário, “ propagação de eventos ” é um dos tópicos mais importantes.

Neste artigo, vamos passar pelo conceito de Propagação de Eventos - Bubbling , Captura e Delegação .

Vamos supor uma UI simples, onde temos um DIV , dentro desse “DIV” existe um “ FORM ” e nesse formulário também está presente um “ BOTÃO ”.

Agora vamos escrever um código JavaScript simples que adicione EVENT LISTENERS a todas essas três tags, ou seja, div, form & button.

1. BUBBLING : Como o nome sugere, como bolhas , os eventos se movem de baixo para cima . De acordo com o código JS acima, clicar em qualquer item mostrará seu tagName como um alerta.

Então, agora como podem ver o fluxo em alerta é: BUTTON -> FORM -> DIV

2. CAPTURA (ou TRICKLING): À medida que capturamos qualquer coisa de cima para baixo, como o nome sugere, o evento será acionado de cima para baixo

CÓDIGO JS para TRICKLING:

eventCapturingByRounit (codepen.io)

stopPropagation() MÉTODO

Agora, suponha que não queremos executar Bubbling ou Trickling, significa que queremos que, se o botão for clicado, apenas o evento OnClick Button seja acionado.

DELEGAÇÃO DO EVENTO:-

A captura e o bubbling nos permitem implementar um dos padrões de manipulação de eventos mais poderosos, chamado delegação de eventos .

A ideia é que, se tivermos muitos elementos manipulados de maneira semelhante, em vez de atribuir um manipulador a cada um deles, colocamos um único manipulador em seu ancestral comum.

eventDelegation por Rounit Sinha (codepen.io)

Exemplo: Suponha que haja um aplicativo E-Comm, onde temos diferentes categorias presentes, como MOBILE, HEADPHONE etc (conforme mostrado no código)

Agora não precisamos adicionar ouvintes de eventos a todas as categorias presentes. Podemos adicionar ouvintes de eventos apenas ao div pai, que é da classe “Produtos” aqui.

E agora como o tagName para todas as categorias é “span” então filtramos apenas aqueles com tagName “span” e agora ele irá disparar para o caminho apenas daqueles com tagName selecionado.

Leia mais em Delegação do evento (javascript.info)