O ao clicar O evento geralmente ocorre quando o usuário clica em um elemento. Ele permite que o programador execute uma função JavaScript quando um elemento é clicado. Este evento pode ser usado para validar um formulário, mensagens de aviso e muito mais.
Usando JavaScript, este evento pode ser adicionado dinamicamente a qualquer elemento. Suporta todos os elementos HTML, exceto , , , , , , , ,
, , e . Isso significa que não podemos aplicar o ao clicar evento nas tags fornecidas.
que meses são o terceiro trimestre
Em HTML, podemos usar o ao clicar atribuir e atribuir um Função JavaScript para isso. Também podemos usar o JavaScript addEventListener() método e passar um clique evento a ele para maior flexibilidade.
Sintaxe
Agora, vemos a sintaxe de uso do ao clicar evento em HTML e em javascript (sem addEventListener() método ou usando o addEventListener() método).
Em HTML
Em JavaScript
object.onclick = function() { myScript }; Em JavaScript usando o método addEventListener()
object.addEventListener('click', myScript);
Vamos ver como usar ao clicar evento usando algumas ilustrações. Agora, veremos os exemplos de uso do ao clicar evento em HTML e em JavaScript.
Exemplo 1 - Usando o atributo onclick em HTML
Neste exemplo, estamos usando o HTML ao clicar atributo e atribuindo uma função JavaScript a ele. Quando o usuário clicar no botão fornecido, a função correspondente será executada e uma caixa de diálogo de alerta será exibida na tela.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Teste agora Saída
seleção de múltiplas tabelas sql
Depois de clicar no botão fornecido, a saída será -
Exemplo 2 – Usando JavaScript
Neste exemplo, estamos usando JavaScript ao clicar evento. Aqui estamos usando o ao clicar evento com o elemento parágrafo.
Quando o usuário clica no elemento do parágrafo, a função correspondente será executada e o texto do parágrafo será alterado. Ao clicar no elemento, a cor de fundo, o tamanho, a borda e a cor do texto também serão alterados.
ator saira banu
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Teste agora Saída
Depois de clicar no texto Clique em mim, a saída será -
vikas divyakirti
Exemplo 3 - Usando o método addEventListener()
Neste exemplo, estamos usando JavaScript addEventListener() método para anexar um clique evento para o elemento de parágrafo. Quando o usuário clica no elemento do parágrafo, o texto do parágrafo é alterado.
Ao clicar no parágrafo, a cor de fundo e o tamanho da fonte dos elementos também serão alterados.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Teste agora Saída
Ao clicar no texto Clique em mim , a saída será -
