Como acionar o evento de clique em JavaScript

Ao programar em JavaScript, geralmente encontramos situações em que queremos invocar qualquer função no botão Clique. Por exemplo, no caso de teste de automação, você precisa testar alguma funcionalidade adicional de uma página da web ou um site. Em tais cenários, a técnica de desencadear eventos de cliques em JavaScript se torna muito útil e eficiente para combater os desafios declarados.

Este artigo o guiará sobre o procedimento para acionar eventos de clique em JavaScript.

Como acionar o evento de clique em JavaScript?

Para acionar o evento de clique em JavaScript, aplique as seguintes técnicas:

• ““clique()”Método
• ““addEventListener ()" e "DispatchEvent ()" métodos

Agora, demonstraremos o uso dos métodos acima mencionados um por um!

Método 1: Trigger Clique

O "clique()”O método é usado para executar um clique no elemento especificado. Este método pode ser implementado criando um botão, obtendo seu ID e acionando o evento de clique quando o botão é clicado usando uma função definida pelo usuário.

Passe pelo exemplo a seguir para demonstração.

Exemplo
No exemplo a seguir, um botão será adicionado com “Clique em mim”Como seu ID e seu evento OnClick associado, que acessará o“clickevent ()”Função:

Clique em mim

No código JavaScript, acesse o botão criado especificando seu ID no documento.getElementById () método. Depois disso, o método "click ()" será invocado para executar a operação adicional:

const get = document.getElementById ('btn');
pegar.clique();

Finalmente, defina a função chamada “clickevent ()”De tal maneira que ele imprimirá a seguinte mensagem no console quando o botão for clicado usando o“clique()”Método:

função clickevent ()
console.log ("clique em acionado pelo evento")

A saída da implementação acima resultará da seguinte maneira:

Na saída acima, observa -se que o botão “Clique em mim”É clicado de maneira automatizada usando o“clique()”Método. Enquanto isso, a função clickevent () é acessada e a mensagem especificada é registrada no console.

Método 2: Evento de clique em Trigger em JavaScript usando métodos "addEventListener ()" e "DispatchEvent ()"

O "addEventListener ()”O método anexa um manipulador de eventos a um objeto DOM e o“DispatchEvent ()”O método envia o evento especificado para o objeto. Esses métodos podem ser usados ​​em combinação para criar um novo objeto de evento e executar o evento de clique com a ajuda da função especificada.

Sintaxe

documento.addEventListener (evento, função)

Na sintaxe acima, “evento”Refere -se ao evento especificado e“função”É a função em que o evento deve ser aplicado.

DispatchEvent (evento)

Aqui, "evento”Refere -se ao objeto de evento selecionado que precisa ser despachado.

Visão geral o exemplo a seguir.

Exemplo
A primeira etapa é incluir um botão com um ID, um evento OnClick e um valor, conforme discutido no método anterior:

Clique em mim

Em seguida, pegue o botão e adicione o evento “clique”Usando o“addEventListener ()”Método e especifique“e”Em seu argumento que se refere ao objeto de evento (clique). Então o "DispatchEvent ()”O método despachará o evento de clique para um objeto chamado“Evento”Como demonstrado:

const get = document.getElementById ('btn');
pegar.addEventListener ('clique', e => );
pegar.expedição (novo evento ('clique'));

Por fim, defina a mesma função clickevent (), conforme declarado no método anterior, para exibir a mensagem correspondente quando “clique”O evento é acionado:

função clickevent ()
console.log ("clique em acionado pelo evento")

Saída

Compilamos métodos diferentes para acionar eventos de clique em javascript.

Conclusão

Para desencadear eventos de clique em JavaScript, o “clique()”O método pode ser aplicado para buscar o botão e invocar a função adicionada de acordo. Também o "addEventListener ()" e "DispatchEvent ()”Os métodos podem ser utilizados para incluir um evento especificado e enviá -lo para um objeto recém -criado. Este artigo demonstrou os métodos para desencadear eventos de clique em JavaScript.