Compreendendo a propagação de eventos em JavaScript

Os eventos em JavaScript agem como notificações de que uma interação do usuário, ou outra ação, ocorreu. Por exemplo, quando você clica em um botão de formulário, seu navegador gera um evento para indicar que isso aconteceu. Digitar em uma caixa de pesquisa também gera eventos e é assim que a sugestão automática geralmente funciona online.

Em JavaScript, os eventos que envolvem a interação do usuário geralmente são disparados contra elementos específicos. Por exemplo, clicar em um botão gera um evento contra esse botão. Mas os eventos também se propagam: eles são disparados contra outros elementos na hierarquia do documento.

Continue lendo para aprender tudo sobre a propagação de eventos e os dois tipos distintos disponíveis.

O que é manipulação de eventos em JavaScript?

Você pode usar o código JavaScript para capturar e responder a eventos que uma página da web gera. Você pode fazer isso para substituir o comportamento padrão ou executar uma ação quando não houver um padrão. Um exemplo comum é a validação de formulário. O tratamento de eventos permite interromper o processo normal de envio do formulário.

Considere este exemplo:

Clique em mim

O código acima tem um elemento de botão com um id chamado botão. Tem um listener de evento de clique que exibe um alerta com a mensagem Olá Mundo.

O que é propagação de eventos?

A propagação de eventos descreve a ordem em que os eventos viajam através do Árvore DOM quando o navegador da web os dispara.

Suponha que haja uma tag de formulário dentro de uma tag div e ambas tenham ouvintes de evento onclick. A propagação de eventos descreve como um ouvinte de evento pode disparar após o outro.

Existem dois tipos de propagação:

1. Borbulhamento de eventos, pelo qual os eventos borbulham para cima, da criança para o pai.
2. Captura de eventos, pela qual os eventos viajam para baixo, de pai para filho.

O que é bolhas de eventos em JavaScript?

O bubbling de evento significa que a direção da propagação do evento será do elemento filho para seu elemento pai.

Considere o seguinte exemplo. Possui três elementos aninhados: div, form e button. Cada elemento tem um clique ouvinte de eventos. O navegador exibe um alerta com uma mensagem ao clicar em cada elemento.

Por padrão, a ordem em que o navegador da web exibe os alertas será botão, formulário e, em seguida, div. Os eventos borbulham da criança ao pai.

 div


 Formato 



 Botão

O que é captura de evento?

Com a captura de eventos, a ordem de propagação é o oposto de borbulhamento. Caso contrário, o conceito é idêntico. A única diferença com a captura é que os eventos ocorrem de pai para filho. Em contraste com o exemplo anterior, com a captura de eventos, o navegador exibirá alertas nesta ordem: div, formulário e botão.

Para obter a captura de eventos, você precisa fazer apenas uma alteração no código. O segundo parâmetro de addEventListener () define o tipo de propagação. É falso por padrão, para representar borbulhamento. Para habilitar a captura de eventos, você precisa definir o segundo parâmetro como verdadeiro.

 div.addEventListener ("click", () => {
 alerta ("div")
 }, verdadeiro);
 form.addEventListener ("click", () => {
 alerta ("formulário")
 }, verdadeiro);
 button.addEventListener ("click", () => {
 alerta ("botão")
 }, verdadeiro);

Como você pode impedir a propagação de eventos?

Você pode interromper a propagação de eventos usando o stopPropagation () método. O addEventListener () método aceita um nome de evento e uma função de manipulador. O manipulador recebe um objeto de evento como seu parâmetro. Este objeto contém todas as informações sobre o evento.

Quando você invoca o stopPropagation () método, o evento irá parar de se propagar a partir desse ponto. Por exemplo, quando você usa stopPropagation () no elemento do formulário, os eventos vão parar de borbulhar no div. Se você clicar no botão, verá eventos gerados no botão e no formulário, mas não no div.

form.addEventListener ("click", (e) => {
e.stopPropagation ();
 alerta ("formulário");
});

Relacionado: A última folha de dicas do JavaScript

JavaScript tem muito poder sob o capô

O tratamento de eventos do JavaScript é poderoso, comparável a muitas linguagens de interface completas. Quando você está desenvolvendo aplicativos da web interativos, é uma parte vital de sua caixa de ferramentas. Mas existem muitos outros tópicos avançados para entender. Para desenvolvedores profissionais de JavaScript, há muito o que aprender!

Se você quiser aprender a codificar JavaScript como um profissional, confira nosso guia para linhas inteligentes e prepare-se para impressionar em sua próxima entrevista.

11 JavaScript One-Liners que você deve conhecer

Obtenha muito com apenas um pouco de código, usando essa ampla variedade de linhas simples de JavaScript.

Leia a seguir

Sobre o autor