Evento borbulhando ou captura de eventos em JavaScript
Este artigo discutirá o evento JavaScript Bubbling and Event Capturing. Além disso, os exemplos relacionados à borbulha e captura de eventos serão demonstrados neste artigo. Então vamos começar!
Evento borbulhando em javascript
Em JavaScript, o evento Bubbling é um evento que borbulha do alvo ou dos elementos mais internos para seus pais, então segue uma abordagem de baixo para cima e move o fluxo de controle de eventos para seus ancestrais. O Evento Bubling é considerado como método de fluxo de eventos padrão em todos os navegadores modernos.
Exemplo: Evento borbulhando em JavaScript
No exemplo a seguir, adicionamos um título com a tag, um elemento div com o id “ParentElement” e seu elemento de botão filho aninhado com o ID “Afibelement”:
Depois de buscar os elementos HTML criados usando o "documento.QuerySelector () ” Método, adicionaremos um ouvinte de eventos à divisão “ParentElement” e seu botão aninhado “Afibelement”. A função passada no “AddEventListener ()” exibirá a string adicionada na "console.registro()" método:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
Agora, clicaremos no "Criança" Botão que pode ser visto na seguinte saída:
Clicando no "Criança" Botão, o passado "função()" No método addEventListener () será executado. Então o “OnClick ()” Método do “Div” elemento será invocado. Está acontecendo por causa do “Evento borbulhando”:
No exemplo acima, quando clicamos no "Criança" botão, o "clique" Evento é passado do botão com ID “Afibelement” e o controle de fluxo de eventos se move para o "documento" Na seguinte ordem:
Como parar o evento borbulhando em javascript
Usando o "evento.StopPropagation () ” Método, você pode interromper facilmente o evento borbulhando em seu programa JavaScript e interrompe a viagem do evento de baixo para o topo.
Exemplo: Stop Event Bubling em JavaScript
No exemplo abaixo, adicionaremos o "evento.StopPropagation () ” método para o “OnClick ()” evento do botão criado com ID “Afibelement”. Como resultado, o intérprete JavaScript não passará o evento para o elemento "documento" mais externo:
Clicar no botão destacado só será imprimido “Criança clicada” E então impede o evento de borbulhar:
Captura de eventos em JavaScript
O processo em que um evento é capturado quando seu fluxo de controle se move do elemento superior para o elemento alvo é conhecido como captura de eventos. Embora os navegadores modernos não tenham a capacidade de permitir a captura de eventos por padrão, você pode executar esta operação através do código JavaScript.
Exemplo: Captura de eventos em JavaScript
Em nosso programa JavaScript, antes de tudo, adicionaremos um título e um “Div” elemento com identificação “ParentElement” e seu elemento filho com “Afibelement” eu ia:
Em seguida, vamos invocar o "documento.QuerySelector () ” Método para obter o elemento pai e filho:
A seguir "Criança" Botão primeiro invocará o evento adicionado ao elemento pai. Depois disso, ele executará o evento anexado ao alvo:
No exemplo acima, quando clicamos no "Criança" botão, o "clique" O evento é passado do elemento pai que é "documento", para o destino de evento especificado “Afibelement” botão:
Como parar de capturar eventos em javascript
Para parar de capturar eventos, você pode utilizar o "evento.StopPropagation () ” método. A diferença entre interromper a captura do evento e a borbulha do evento é que, em eventos borbulhando, anexamos o “evento.StopPropagation () ”Método com o evento relacionado ao elemento filho, enquanto, na captura de eventos, o evento.O método StopPropagation () é adicionado no evento pai.
Execute o exemplo abaixo para saber como parar a captura de eventos usando o código JavaScript:
A saída fornecida significa que a captura de eventos é interrompida após a execução do evento associado ao elemento pai:
Aqui está a visão completa do fluxo de eventos com as fases de captura de eventos e bolhas de eventos:
Conclusão
Em JavaScript, Bubbling e captura de eventos de eventos são os conceitos mais importantes em relação à propagação de eventos. No HTML DOM, a captura de eventos refere -se à propagação de eventos de elementos ancestrais para o filho. No evento, borbulhando, o fluxo de controle de eventos se move dos elementos infantis para os ancestrais. Este artigo discutiu o evento JavaScript Bubbling and Event Capturing. Além disso, os exemplos relacionados à borbulha e captura de eventos também são demonstrados neste artigo.