Basicamente nos deparamos com algum tipo de situação durante a programação em javascript em que podemos criar qualquer função ao clicar no botão. Por exemplo, temos que examinar mais algumas funcionalidades no momento do teste de automação de uma página web ou site. Nesses casos, a técnica de acionamento de evento de clique de javascript torna-se mais confiável e eficiente para enfrentar os desafios declarados.
Neste contexto, aprenderemos sobre os procedimentos do evento de clique do gatilho em javascript.
Como podemos acionar o evento click em javascript:
Temos que aplicar as técnicas abaixo para acionar o evento click em javascript:
a) método click()
b) métodos addEventListener() e dispathEvent
Agora usaremos os métodos escritos acima para demonstrar o seguinte:
Método 1:
Acione o evento de clique usando o método de evento de clique em javascript:
Sobre o elemento mencionado, o método de clique é usado para executar a ação. Utilizando a função definida pelo usuário quando o botão desejado é clicado pelo usuário com a ajuda da criação do botão, obtendo seu id e acionando o evento click, este método pode ser implementado.
concatenar string java
Para maiores esclarecimentos, temos que seguir o exemplo abaixo:
Exemplo:
No exemplo dado abaixo com ter 'Clique aqui' , será criado um botão com id e junto com o evento click para acesso ao evento click nele;
Click here
Ao especificar seu id em javascript, temos que acessar o botão criado no método document.getElementById. Para realizar a próxima operação, o evento click será invocado.
const get= document.getElementById('btn'); get.click();
Por fim, ao clicar no botão, definiremos a impressão da seguinte função chamada 'cliqueEvento()' de forma que no console usando o método click.
function clickEvent() { console.log('now the Click Event is triggered ') } A partir da saída acima do respectivo código, utilizando o método click de forma automatizada, observamos que o botão clique aqui é clicado.
Método 2:
Acione o evento de clique em javascript com a ajuda dos métodos addEventListener() e dispatchEvent()
Em javascript, é o método integral fornecido pela interface de destino de evento javascript.
Um ouvinte de evento é registrado por este método. Chamaremos nossa função configurada quando o evento mencionado for capturado no alvo.
Sintaxe do evento:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
descrição da sintaxe:
- Na sintaxe acima, existe um parâmetro chamado $tipo , que é um parâmetro obrigatório. Indicando o tipo de evento a ser monitorado, os parâmetros aceitam apenas uma string. Este parâmetro faz distinção entre maiúsculas e minúsculas. Vários eventos são suportados por ele, como teclado, clique, banco de dados, entrada, etc.
- Da mesma forma, o $ouvinte é um parâmetro obrigatório também nele. Uma notificação sobre o evento é recebida por este parâmetro como um objeto quando ocorre um evento do tipo mencionado. Na função javascript ou em uma interface Eventlistner, este objeto deve ser implementado.
- Por outro lado, o $opção é um parâmetro opcional iniciar.
Exemplo 1
Open bing const link = document.getElementById('btn'); link.addEventListener('click', e => {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>'e'</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log('The required event is triggered ') } </pre> <hr></5;> Exemplo 2:
Neste exemplo, em primeiro lugar, incluiremos um botão com um id correspondente com um evento onclick junto com um valor igual ao anterior.
Click here
Depois disso, com a ajuda do addEventListener() método, recuperaremos o botão e clicaremos no evento nele para especificar o 'e' em seu argumento, que se refere ao objeto de clique do evento.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Por fim, assim como no método anterior, definiremos o evento click para exibir a mensagem correspondente no momento em que o evento click for acionado.
function clickEvent() { console.log('The required event is triggered ') }