Eventos JavaScript HTML DOM
HTML DOM permite que JavaScript reaja a eventos HTML:
Reagindo a eventos
Um JavaScript pode ser executado quando ocorre um evento, como quando um usuário clica em um elemento HTML.
Para executar o código quando um usuário clicar em um elemento, adicione o código JavaScript a um atributo de evento HTML:
onclick=JavaScript
Exemplos de eventos HTML:
- Quando um usuário clica no mouse
- Quando uma página da web é carregada
- Quando uma imagem foi carregada
- Quando o mouse se move sobre um elemento
- Quando um campo de entrada é alterado
- Quando um formulário HTML é enviado
- Quando um usuário pressiona uma tecla
Neste exemplo, o conteúdo do <h1>elemento é alterado quando um usuário clica nele:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Neste exemplo, uma função é chamada 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>
Atributos de evento HTML
Para atribuir eventos a elementos HTML, você pode usar atributos de evento.
Exemplo
Atribua um evento onclick a um elemento de botão:
<button onclick="displayDate()">Try it</button>
No exemplo acima, uma função chamada displayDateserá executada quando o botão for clicado.
Atribuir eventos usando o HTML DOM
O HTML DOM permite atribuir eventos a elementos HTML usando JavaScript:
Exemplo
Atribua um evento onclick a um elemento de botão:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
No exemplo acima, uma função chamada displayDateé atribuída a um elemento HTML com a extensão id="myBtn".
A função será executada quando o botão for clicado.
Os eventos onload e onunload
Os eventos onloade são acionados quando o usuário entra ou sai da página.onunload
O onloadevento pode ser usado para verificar o tipo e a versão do navegador do visitante e carregar a versão adequada da página da web com base nas informações.
Os eventos onloade podem ser usados para lidar com cookies.onunload
Exemplo
<body onload="checkCookies()">
O evento onchange
O onchangeevento é 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 alterar o conteúdo de um campo de entrada.
Exemplo
<input type="text" id="fname"
onchange="upperCase()">
Os eventos onmouseover e onmouseout
Os eventos onmouseoverand onmouseoutpodem ser usados para acionar uma função quando o usuário passa o mouse sobre ou fora de um elemento HTML:
Os eventos onmousedown, onmouseup e onclick
Os eventos onmousedown, onmouseupe onclicksão todos partes de um clique do mouse. Primeiro quando um botão do mouse é clicado, o evento onmousedown é acionado, então, quando o botão do mouse é liberado, o evento onmouseup é acionado, finalmente, quando o clique do mouse é concluído, o evento onclick é acionado.
Mais exemplos
Altera uma imagem quando um usuário mantém pressionado o botão do mouse.
Exibe uma caixa de alerta quando a página terminar de carregar.
Altera a cor de fundo de um campo de entrada quando ele recebe o foco.
Altera a cor de um elemento quando o cursor se move sobre ele.
Referência de objeto de evento HTML DOM
Para obter uma lista de todos os eventos HTML DOM, consulte nossa Referência completa de objetos de eventos HTML DOM .