Evento onclick
Exemplo
Execute um JavaScript quando um botão é clicado:
<button onclick="myFunction()">Click me</button>
Definição e uso
O onclickevento ocorre quando o usuário clica em um elemento.
Em HTML:
<element onclick="myScript">
Em JavaScript:
object.onclick = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("click", myScript);
Detalhes técnicos
| Bolhas: | sim |
|---|---|
| Cancelável: | sim |
| Tipo de evento: | MouseEvent |
Tags HTML suportadas : |
Todos exceto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title> |
Mais exemplos
Clique em um <botão> para exibir a data:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Clique em um elemento <h3> para alterar a cor do texto:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Outro exemplo de como alterar a cor de um elemento:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Clique para copiar o texto de um campo de entrada para outro:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Como atribuir um evento "onclick" ao objeto de janela:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Use onclick para criar um menu suspenso:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Páginas relacionadas
Tutorial JavaScript: Eventos JavaScript
Referência HTML DOM: evento ondblclick
Referência HTML DOM: evento onmousedown
Referência HTML DOM: evento onmouseup
Suporte ao navegador
onclické um recurso DOM Nível 2 (2001).
É totalmente suportado em todos os navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |