Event borbulhamento e captura de eventos em Javascript explicados: como utilizar?
Publicados: 2020-03-26Índice
Introdução
Duas terminologias muito comuns usadas para fluxo de eventos em JavaScript são Event Bubbling e Event Capture .
Essas são duas maneiras importantes pelas quais um evento é propagado na API HTML DOM quando ambos os elementos registram um identificador para um evento e o evento ocorre em um elemento aninhado em outro elemento. A ordem na qual um evento é recebido pelos elementos é determinada pelo modo de propagação do evento. Continue lendo para saber o uso de Event Bubbling e Event Capture em JavaScript e por que eles são necessários no desenvolvimento de páginas da web.
Principais conclusões
- Explicando os termos evento, fluxo de eventos, manipuladores de eventos e ouvintes de eventos
- Evento borbulhante e captura de eventos em JavaScript
- Utilitário de borbulhamento de eventos e captura de eventos em JavaScript
Eventos e fluxo de eventos
A interação de páginas web HTML com JavaScript é mediada por eventos que ocorrem quando a página é manipulada pelo usuário ou pelo navegador. O carregamento de uma página, o usuário clicar em um botão, fechar uma janela, são exemplos de eventos.
A ordem em que os eventos são recebidos na página da Web é denominada fluxo de eventos. O processo de fluxo de eventos é concluído em 3 etapas – captura de eventos (interceptação do evento), direcionamento do evento (o destino obtém o evento) e borbulhamento do evento (resposta ao evento).
Manipuladores de eventos e ouvintes de eventos em JavaScript
Event Handler é um código JavaScript que é escrito dentro das tags HTML em vez de dentro das tags <script>. Os manipuladores de eventos executam JavaScript quando um evento acontece, como pressionar um botão. A sintaxe básica é: name_of_handler=”Código JavaScript aqui”
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Goolge</a>
Um procedimento que aguarda a ocorrência de um evento é um Event Listener. JavaScript tem uma função embutida, o addEventListener(), que recebe o evento para ouvir e chama um segundo argumento quando o referido evento é acionado. A sintaxe é: element.addEventListener(evento, ouvinte);
Evento borbulhando em JavaScript
Event Bubbling é uma terminologia comum encontrada ao desenvolver uma página da Web ou um aplicativo da Web usando JavaScript. O borbulhamento de eventos é um estágio no processo de fluxo de eventos quando o evento começa no elemento mais específico ou no nó mais profundamente aninhado no DOM e subsequentemente flui para cima em direção ao nó menos específico, ou seja, o documento.
Fonte
<!DOCTYPE HTML>
<html>
<cabeça>
<título>……</título>
</head>
<corpo>
<div id=”demo”> Pressione aqui.</div>
</body>
</html>
Ao clicar no elemento <div>, o evento 'click' ocorre na seguinte ordem:
- <div>
- <corpo>
- <html>
- Documento
O evento 'click' aciona o elemento <div>. Cada nó é subsequentemente disparado ao longo da árvore DOM, para cima, até que o documento objeto seja alcançado.
Leia: Ideias e tópicos de projetos de pilha completa
Captura de eventos em JavaScript
Event Capture é um modelo alternativo no fluxo de eventos que foi introduzido pela primeira vez pelo Netscape Browser. Como afirmado por este modelo, um evento é recebido primeiro pelo nó menos específico e o nó mais específico ou o elemento mais profundamente aninhado recebe o evento por último. Nesse modelo, um evento é interceptado antes de atingir o destino real. No entanto, ao contrário do Event Bubbling, os navegadores modernos não têm suporte para esse modelo e, portanto, a captura de eventos pode ser usada apenas em circunstâncias específicas.
Fonte
Referindo-se ao exemplo indicado na seção anterior, clicar no elemento <div> aciona o evento 'click' na seguinte ordem:
- Documento
- <corpo>
- <html>
- <div>
O que acontece na Fase de Captura de Eventos?
Na fase de captura de eventos, são chamados os listeners de captura cujo valor é registrado como “true”. Está escrito da seguinte forma:
el.addEventListener('Click', listener, true)
Aqui um evento é capturado porque o valor do ouvinte é registrado como “true”. Caso não haja valor, o valor padrão é “false” com o resultado de que o evento não é capturado. Portanto, nesta fase, apenas os eventos com valor verdadeiro são chamados e capturados. Na fase de destino subsequente, todos os ouvintes registrados são chamados, independentemente de seu valor ser registrado como verdadeiro ou falso.
Fluxo de eventos DOM em JavaScript
O DOM Nível 2 especifica três estágios para o modelo de fluxo de eventos:
- Fase de captura de eventos
- No alvo
- Fase de borbulhamento do evento
Fonte
Se houver uma oportunidade de interceptar o evento, a captura de eventos ocorre primeiro. Isso é seguido pelo destino real recebendo o evento. Eventualmente, na fase de borbulhamento do evento, ocorre a resposta final ao evento. Referindo-se ao exemplo indicado na seção anterior, clicar no elemento <div> dispara o evento 'click' na ordem ilustrada no diagrama acima.
Leia: Salário Full Stack Developer na Índia
Utilitário de borbulhamento de eventos e captura de eventos em JavaScript
Na Fase Event Bubbling, apenas os eventos com valor de flag “false” (não-capturadores) são chamados. Event Bubbling e Event Capture são aspectos importantes do DOM.
el.addEventListener('Click', listener, false) // listener não captura
el.addEventListener('Click', listener) // o listener não captura
O código acima exemplifica como funcionam as fases de borbulhamento e captura. Todo evento não atinge o alvo. Alguns eventos não são borbulhados e param após a fase de destino. O evento bubbling não é aplicável em todos os tipos de eventos e o listener deve ter a propriedade booleana “.bubble” do objeto do evento além de possuir algumas outras propriedades como – e.target (para referenciar o destino do evento) e e.eventPhase (os ouvintes atuais se registram neste modo).
Conclusão
O fluxo de eventos em JavaScript tem três fases importantes – fase de captura de eventos, fase de destino e fase de borbulhamento de eventos. A Captura de Eventos é a primeira a ocorrer, onde os eventos são interceptados se necessário. Isso é seguido pelo evento atingindo o alvo real e a fase final é borbulhante, quando ocorre a resposta final a um evento. Assim, pode-se concluir apropriadamente que Event Bubbling e Event Capture em JavaScript são os fundamentos dos quais o manipulador de eventos e a delegação de eventos são dependentes.
Se você estiver interessado em aprender mais sobre full stack, confira o PG Diploma in Full-stack Software Development da upGrad & IIIT-B, que é projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições, IIIT- B Status de ex-aluno, projetos práticos práticos e assistência de trabalho com as principais empresas.