Este tutorial definirá o procedimento de como configurar o onClick com JavaScript.
Como definir onClick com JavaScript
Para definir o ao clicar com JavaScript, existem dois métodos diferentes, que são:
- O primeiro método é atribuir um valor ao elemento HTML ao clicar atributo usando JavaScript.
- O segundo método é adicionar explicitamente um ouvinte de evento no evento HTML que verifica o “ clique ” evento.
Exemplo 1: atribuir um valor ao atributo onclick do elemento HTML usando JavaScript
No arquivo HTML, crie um cabeçalho e um botão “ Clique em mim ” com a identificação “ js ” que acionará a função JavaScript ao clicar nela.
< h2 > Definir propriedade onClick com JavaScript h2 >
< ID do botão = 'js' > Clique em mim botão >
Na etapa seguinte, o botão criado será acessado e um “ ao clicar ” será anexado a ele. Ao clicar no botão, a função especificada será executada e o “ estilo.fundoCor ” mudará a cor do botão da seguinte forma:
documento. getElementById ( 'js' ) . ao clicar = função jsFunc ( ) {
documento. getElementById ( 'js' ) . estilo . cor de fundo = 'Roxo' ;
}
A saída correspondente será:
Exemplo 2: adicionar explicitamente um ouvinte de eventos no evento HTML
Crie um botão “ Clique aqui! ” e atribui um id “ evento ” para ele que irá acionar o método addEventListener() no 'clique' evento:
< ID do botão = 'evento' > Clique aqui ! Forte > botão Forte >>
Pegue o botão usando seu Eu iria e, em seguida, anexar 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 eventoFunc ( ) {
documento. getElementById ( 'evento' ) . estilo . cor de fundo = 'Verde' ;
}
Resultado
Exemplo 3: usando todos os métodos onClick de uma vez
Neste exemplo, o funcionamento de todos os métodos será exibido de uma só vez. A primeira é a maneira padrão de adicionar o atributo onclick na própria tag HTML. Depois disso, os dois métodos de configuração do atributo onclick com a ajuda de JavaScript também foram demonstrados.
No exemplo a seguir, crie três botões e veja a funcionalidade do atributo onclick.
- O primeiro botão “ Clique ” chamará o “ htmlFunc() ” no evento de clique.
- O botão ' Clique em mim ” será acessado com seu id atribuído “ js ” e, em seguida, atribua um valor ao atributo onclick do botão usando JavaScript.
- O botão ' Clique aqui! ” será acessado usando o id “ evento ” e, em seguida, anexe um “ addEventListener() ” com ele:
< ID do botão = 'js' > Clique em mim botão >< br >< br >
< ID do botão = 'evento' > Clique aqui ! botão >
A função abaixo irá acionar o “ ao clicar ” evento do botão “ Clique ”:
função htmlFunc ( ) {alerta ( 'O botão clicado pelo evento HTML onClick' ) ;
}
Ao clicar no botão “ Clique em mim ”, a seguinte função será acionada onde uma mensagem de aviso será exibida.
documento. getElementById ( 'js' ) . ao clicar = função jsFunc ( ) {alerta ( 'O botão clicado pela função JavaScript onClick' ) ;
}
A função dada irá acionar o botão “ Clique aqui! ”:
documento. getElementById ( 'evento' ) . addEventListener ( 'clique' , eventFunc ) ;função eventoFunc ( ) {
alerta ( 'O botão clicado por JavaScript onClick com o método EventListener' ) ;
}
A saída exibirá mensagens de alerta em cada clique de botão:
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 ' clique ” evento. Este tutorial definiu os métodos para definir onClick com JavaScript juntamente com exemplos.