O que é captura de eventos em JavaScript?
Em JavaScript, diferentes tipos de eventos podem ser realizados, incluindo captura de eventos e borbulhas de eventos. Por exemplo, a captura de eventos se propaga do elemento raiz para o elemento filho. Por outro lado, o evento borbulhante propaga o elemento filho para o pai ou um elemento raiz. Para realizar o evento captura “addEventListener ()”O método pode ser usado.
Esta postagem explicará a captura de eventos JavaScript.
O que é captura de eventos em JavaScript?
A captura de eventos é um cenário específico em que os eventos gerados começam a partir dos elementos pais e descem em direção ao elemento alvo/filho que iniciou o ciclo do evento. É totalmente diferente da borbulha dos eventos, na qual os eventos se propagam para fora dos elementos específicos para os mais externos. Além disso, a captura de elementos ocorre antes de borbulhar.
Sintaxe
addEventListener (tipo, ouvinte, USECAPTURA)
Nesta sintaxe:
- ““tipo”Determina o tipo do evento.
- ““ouvinte”Define a função de chamada quando um evento específico ocorre.
- ““Usecapture”Indica o valor booleano que é falso por padrão e mostra que está na fase borbulhante.
Exemplo 1: captura de eventos do elemento de botão
Primeiro, adicione um “div”Contêiner e atribua um ID com um nome específico para capturar o evento. Em seguida, utilize o “”Elemento para fazer um botão e incorporar algum texto para exibir no botão:
Além disso, entre os “”Elemento, primeiro, invoca o“QuerySelector ()”Método e passe o“eu ia”Para selecionar e armazenar na variável declarada:
var parentElement = documento.QuerySelector ('#main');
Em seguida, acesse o botão usando o ID do botão com a ajuda de “QuerySelector ()”:
var ChildElement = documento.QuerySelector ('#btn');
Invoque o “addEventListener ()”E passe o evento. Este evento funciona quando o usuário clica no botão. Ele acionará o elemento pai em cada botão Clique e imprimir o resultado no console:
ParentElement.addEventListener ('click', function ()
console.log ("Invoque o elemento pai");
,verdadeiro);
Utilize o “ChildElement.addEventListener ()”Método para invocar o elemento filho em cada botão Clique em. Então, chame o console.Método log () para exibir o resultado no console:
ChildElement.addEventListener ('click', function ()
console.log ("Invoque o elemento filho");
);
Pode -se observar que o evento foi capturado com sucesso em cada botão Clique:
Exemplo 2: Captura de eventos do elemento de parágrafo
Para capturar o evento do elemento de parágrafo, utilize o “ Primeiro Segundo Terceiro Defina um “Event_Capturing ()”Função e use o seguinte código listado abaixo: Ligue para a função definida a ser exibida na tela: É tudo sobre o evento capturar em JavaScript. Conclusão A captura de eventos começa a propagar o elemento do pai e desce em direção ao elemento alvo/filho que iniciou o ciclo do evento. Para realizar o evento captura “addEventListener ()”O método pode ser usado. Este post demonstrou o método para realizar a captura de eventos.
function Event_Capturing ()
var all_p = documento.getElementsByTagName ("P");
para (var i = 0; i < All_p.length; i++)
All_p [i].addEventListener ("clique", clickhandler, true);
função clickHandler ()
Alerta (este.getAttribute ("id") + "evento tratado com sucesso");