tutoriais mais recente desenvolvimento web
 

onclick evento

Evento Object Reference objeto de evento

Exemplo

Executar um JavaScript quando um botão é clicado:

<button onclick="myFunction()">Click me</button>
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O evento onclick ocorre quando o usuário clica em um elemento.

Suporte navegador

Evento
onclick sim sim sim sim sim

Sintaxe

Em HTML:

< Tente você mesmo "

Em JavaScript:

object .onclick=function(){ Tente você mesmo "

Em JavaScript, usando o addEventListener() Método:

object .addEventListener("click", myScript );
Tente você mesmo "

Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.

Detalhes técnicos

Bolhas: sim
cancelable: sim
Tipo de evento: MouseEvent
tags HTML suportadas: Todos os elementos HTML, EXCETO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
DOM Versão: Nível 2 Eventos
Exemplos

mais Exemplos

Exemplo

Clique em um <button> elemento para exibir o dia atual, data e hora:

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
Tente você mesmo "

Exemplo

Clique em um <p> elemento para mudar sua cor do texto para vermelho:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
Tente você mesmo "

Exemplo

Outro exemplo de como alterar a cor de um <p> elemento, clicando sobre ela:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>
Tente você mesmo "

Exemplo

Clique em um botão para copiar um texto de um campo de entrada para outro campo de entrada:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Tente você mesmo "

Exemplo

Atribuir o "onclick" evento para o objeto de janela:

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Tente você mesmo "

Exemplo

Usando onclick para criar um botão drop-down:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
Tente você mesmo "

Páginas relacionadas

HTML DOM referência: evento ondblclick

HTML DOM referência: evento onmousedown

HTML DOM referência: evento onmouseup

<Objeto de evento