Eventos HTML DOM

O HTML DOM permite que o JavaScript reaja a eventos HTML:

O mouse está sobre!
Clique em mim

Reagir a eventos

JavaScript pode executar quando um evento ocorre, por exemplo, quando o usuário clica em um elemento HTML.

Para executar código quando o usuário clicar em um elemento, adicione código JavaScript à propriedade de evento HTML:

onclick=JavaScript

Exemplo de evento HTML:

  • Quando o usuário clica no mouse
  • quando a página da web for carregada
  • quando a imagem for carregada
  • quando o mouse passar sobre o elemento
  • quando o campo de entrada for alterado
  • quando o formulário HTML for enviado
  • quando o usuáriopressionar uma tecla

Neste exemplo, quando o usuário clicar <h1> será alterado seu conteúdo:

exemplo

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Clique neste texto!</h1>
</body>
</html>

Experimente você mesmo

Neste exemplo, a função é chamada a partir do manipulador de eventos:

exemplo

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Clique neste texto!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Experimente você mesmo

propriedades de eventos HTML

para atribuir eventos a elementos HTML, você pode usar atributos de evento.

exemplo

atribuição ao elemento button onclick evento:

<button onclick="displayDate()">Experimente</button>

Experimente você mesmo

no exemplo anterior, a função chamada displayDate é executada quando o botão é clicado.

atribuição de eventos usando o DOM HTML

O DOM HTML permite que você use JavaScript para atribuir eventos aos elementos HTML:

exemplo

para o elemento button especifica onclick evento:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Experimente você mesmo

no exemplo anterior, a função chamada displayDate é atribuída ao elemento HTML com id="myBtn".

ao clicar no botão será executada a função.

eventos onload e onunload

ao entrar e sair da página, o visitante desencadeia onload e onunload evento.

onload o evento pode ser usado para detectar o tipo de navegador e a versão do visitante, carregando então a versão apropriada da página com base nessa informação.

onload e onunload o evento pode ser usado para lidar com cookies.

exemplo

<body onload="checkCookies()">

Experimente você mesmo

evento onchange

onchange o evento é frequentemente usado em conjunto com a validação de campos de entrada.

abaixo está um exemplo de como usar onchange do exemplo. Quando o usuário altera o conteúdo do campo de entrada, a função upperCase() é chamada.

exemplo

<input type="text" id="fname" onchange="upperCase()">

Experimente você mesmo

eventos onmouseover e onmouseout

onmouseover e onmouseout Os eventos podem ser usados para acionar uma função quando o usuário move o mouse sobre ou fora de um elemento HTML:

O mouse está sobre!

Experimente você mesmo

eventos onmousedown, onmouseup e onclick

onmousedown, onmouseup e onclick Os eventos compõem o evento de clique completo do mouse.

Primeiro quando o botão do mouse for clicado:onmousedown O evento foi acionado; então quando o botão do mouse for liberado:onmouseup O evento foi acionado; finalmente, quando o clique do mouse for concluído:onclick O evento foi acionado.

Clique em mim

Experimente você mesmo

Mais Exemplos

onmousedown e onmouseup
Mude a imagem quando o usuário pressionar o botão do mouse.
onload
Exiba uma caixa de diálogo de alerta quando a página estiver completa.
onfocus
Mude a cor de fundo do campo de entrada quando ele ganhar foco.
Eventos de Mouse
Mude a cor do elemento quando o ponteiro do mouse estiver sobre ele.

Manual de Referência do Objeto Evento DOM HTML

Para obter uma lista completa de eventos DOM HTML, acesse nossa Manual de Referência do Objeto Evento DOM HTML.