tutoriais mais recente desenvolvimento web
 

JavaScript HTML DOM Eventos


HTML DOM permite JavaScript para reagir a eventos de HTML:

Rato sobre mim
Clique em mim

Reagindo a eventos

A JavaScript pode ser executado quando ocorre um evento, como quando um usuário clica em um elemento HTML.

Para executar código quando um usuário clica em um elemento, adicionar o código JavaScript para um atributo do evento HTML:

onclick=JavaScript

Exemplos de eventos de HTML:

  • Quando um usuário clica o mouse
  • Quando uma página web foi carregado
  • Quando uma imagem tiver sido carregado
  • Quando o mouse se move sobre um elemento
  • Quando um campo de entrada é alterado
  • Quando um formulário HTML é apresentado
  • Quando um usuário acaricia uma chave

Neste exemplo, o conteúdo do <h1> elemento é alterado quando um usuário clica sobre ele:

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>
Tente você mesmo "

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

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
    id.innerHTML = "Ooops!";
}
</script>

</body>
</html>
Tente você mesmo "

Atributos HTML Evento

Para atribuir eventos a elementos HTML, você pode usar os atributos de eventos.

Exemplo

Atribuir um evento onclick de um elemento de botão:

<button onclick="displayDate()">Try it</button>
Tente você mesmo "

No exemplo acima, uma função chamada displayDate será executada quando o botão é clicado.


Atribuir eventos usando o HTML DOM

O DOM HTML permite atribuir eventos a elementos HTML usando JavaScript:

Exemplo

Atribuir um evento onclick de um elemento de botão:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Tente você mesmo "

No exemplo acima, uma função chamada displayDate é atribuído a um elemento HTML com o id="myBtn" .

A função será executada quando o botão é clicado.


Os onload e onunload Eventos

Os onload e onunload eventos são acionados quando o usuário entra ou sai da página.

O onload evento pode ser usado para verificar a versão de tipo de navegador e o navegador do visitante, e carregar a versão apropriada da página da web com base na informação.

Os onload e onunload eventos podem ser usados para lidar com cookies.

Exemplo

<body onload="checkCookies()">
Tente você mesmo "

O onchange evento

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

Abaixo está um exemplo de como usar o onchange . A upperCase() função será chamada quando um usuário altera o conteúdo de um campo de entrada.

Exemplo

<input type="text" id="fname" onchange="upperCase()">
Tente você mesmo "

Os onmouseover e onmouseout eventos

O onmouseover e onmouseout eventos pode ser usado para acionar uma função quando o usuário passa o mouse sobre, ou fora de, um elemento HTML:

Rato sobre mim

Tente você mesmo "


O onmousedown , onmouseup e onclick eventos

O onmousedown , onmouseup e onclick eventos são todos partes de um clique do mouse. Primeiro, quando um botão do mouse é clicado, o onmousedown evento é acionado, então, quando o botão do mouse é liberado, o onmouseup evento é acionado, finalmente, quando o clique do mouse estiver concluída, o onclick evento é acionado.

Click Me

Tente você mesmo "


mais Exemplos

onmousedown e onmouseup
Alterar uma imagem quando um usuário mantém pressionado o botão do mouse.

carregando
Exibir uma caixa de alerta quando a página terminar de carregar.

onfocus
Alterar a cor de fundo de um campo de entrada quando se obtém o foco.

eventos de rato
Alterar a cor de um elemento quando o cursor se move sobre ele.


HTML DOM Evento Object Reference

Para obter uma lista de todos os eventos HTML DOM, vá para a completa HTML DOM Evento Object Reference .


Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 »