Artigo original: JavaScript Onclick Event Explained
O evento onclick no JavaScript permite que você, o programador, execute uma função quando se clica em um elemento.
Exemplo de onclick com um botão
<button onclick="minhaFuncao()">Clique aqui</button>
<script>
function minhaFuncao() {
alert('Alguém clicou no botão!');
}
</script>No exemplo simples acima, quando um usuário clica no botão, verá um alerta no navegador dizendo Alguém clicou no botão!.
Adicionando o onclick dinamicamente
O evento onclick também pode ser adicionado de modo programático a qualquer elemento usando o código do exemplo a seguir:
<p id="foo">Clique neste elemento.</p>
<script>
var p = document.getElementById("foo"); // Encontre o elemento de parágrado na página
p.onclick = mostrarAlerta; // Adicione a função de onclick ao elemento
function mostrarAlerta(event) {
alert("Evento do onclick acionado!");
}
</script>Observação
É importante observar que, ao usar o onclick, podemos adicionar apenas uma função/um evento de "escuta" (do inglês, listener). Se quiser adicionar mais de uma, use addEventListener(), que é o modo preferencial de se adicionar eventos desse tipo.
No exemplo acima, quando um usuário clica no elemento de parágrafo p , no html, ele verá um alerta dizendo Evento do onclick acionado!.
Evitando a ação padrão
No entanto, se adicionarmos onclick a links (elemento de âncora, a tag a no HTML), pode ser que desejemos evitar que a ação padrão ocorra:
<a href="https://guide.freecodecamp.org" onclick="meuAlerta()">Guias</a>
<script>
function meuAlerta(event) {
event.preventDefault();
alert("Alguém clicou no link, mas a página não foi aberta.");
}
</script>No exemplo acima, evitamos o comportamento padrão de um elemento a (que é o de abrir o link) usando event.preventDefault() dentro da função de callback associada a onclick.
Outros recursos
Associando o manipulador de eventos .on() no jQuery (em inglês)