HTML DOM permite JavaScript para reagir a eventos de HTML:
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.
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.
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:
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.
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 »