Como definir o OnClick com JavaScript

Um evento é uma ação realizada por um navegador ou um usuário. O conceito JavaScript de manipuladores ou ouvintes de eventos pode ser utilizado para lidar com esses eventos. Um certo evento desencadeia a execução de um ouvinte de evento. Um desses ouvintes de eventos é “ONCLICK.”Quando um usuário clica em um elemento, um ouvinte de evento OnClick é acionado ou executado.

Este tutorial definirá o procedimento sobre como definir o OnClick com JavaScript.

Como definir o OnClick com JavaScript

Para definir o ONCLICK Com JavaScript, existem dois métodos diferentes, que são:

• O primeiro método é atribuir um valor ao elemento html ONCLICK atributo usando javascript.
• O segundo método é adicionar explicitamente um ouvinte de evento no evento HTML, que verifica o “cliqueEvento.

Exemplo 1: Atribua um valor ao atributo OnClick do elemento HTML usando JavaScript

No arquivo HTML, crie um título e um botão “Clique em mim"Com o id"JS”Que acionará a função JavaScript enquanto clica nela.

Defina a propriedade OnClick com JavaScript

Clique em mim

Na etapa seguinte, o botão criado será acessado e um “ONCLICK”O atributo será anexado a ele. Após o clique do botão, a função especificada será executada e o “estilo.cor de fundo”A propriedade mudará a cor do botão da seguinte maneira:

documento.getElementById ("js").OnClick = função jsfunc ()
documento.getElementById ("js").estilo.AntecedentesColor = "Purple";

A saída correspondente será:

Exemplo 2: Adicione explicitamente um ouvinte no evento HTML

Crie um botão “Clique aqui!”E atribui um id“evento”Para ele, que acionará o método addEventListener () no "clique" evento:

Clique aqui!botão>

Busque o botão usando seu eu ia e então anexe um “addEventListener ()”Método, passando um“clique”Evento e uma função“Eventfunc”Onde a cor de fundo do botão será alterada:

documento.getElementById ("evento").addEventListener ("clique", eventfunc);
função eventfunc ()
documento.getElementById ("evento").estilo.AntecedentesColor = "verde";

Saída

Exemplo 3: Usando todos os métodos OnClick de uma vez

Neste exemplo, o funcionamento de todos os métodos será exibido de uma vez. Primeiro é a maneira padrão de adicionar o atributo onclick na própria tag html. Depois disso, os dois métodos de definir o atributo onclick com a ajuda do JavaScript também foram demonstrados.

No exemplo seguinte, crie três botões e veja a funcionalidade do atributo onclick.

• O primeiro botão “Clique”Vai chamar o“htmlfunc ()”No evento de clique.
• O botão "Clique em mim”Será acessado com seu ID designado“JS”E depois atribua um valor ao atributo onclick do botão usando JavaScript.
• O botão "Clique aqui!”Será acessado usando o ID“evento”E depois anexe um“addEventListener ()”Método com ele:

Clique


Clique em mim


Clique aqui!

A função abaixo acionará o “ONCLICK”Evento do botão“Clique”:

função htmlfunc ()
Alert ("O botão clicado por HTML OnClick Event");

Ao clicar no “Clique em mim”Botão, a seguinte função acionará quando uma mensagem de aviso será exibida.

documento.getElementById ("js").OnClick = função jsfunc ()
alerta ("o botão clicado por JavaScript OnClick Function");

A função fornecida acionará o botão “Clique aqui!”:

documento.getElementById ("evento").addEventListener ("clique", eventfunc);
função eventfunc ()
Alert ("O botão clicado por JavaScript OnClick com o método EventListener");

A saída exibirá as mensagens alertadas em cada botão Clique:

Conclusão

Para definir o OnClick com JavaScript, existem duas abordagens diferentes, a primeira é atribuir um valor ao atributo OnClick do elemento HTML usando JavaScript e a segunda abordagem é adicionar explicitamente um ouvinte de evento no evento HTML que verifica o “cliqueEvento. Este tutorial definiu os métodos para definir OnClick com JavaScript junto com exemplos.