Eventos são chamadas especiais de funções que são disparadas pelos objetos dos elementos HTML.
Quando o JavaScript é usado em páginas HTML, o JavaScript pode "reagir" a esses eventos.
Um evento HTML pode ser algo que o navegador faz ou algo que um usuário faz.
Aqui estão alguns exemplos de eventos HTML:
- Uma página da web em HTML terminou de carregar.
- Um campo de entrada HTML foi alterado.
- Um botão HTML foi clicado.
Muitas vezes, quando os eventos acontecem, você pode querer fazer algo.
JavaScript permite executar código quando eventos são detectados e disparados.
O HTML permite que atributos do manipulador de eventos, com código JavaScript , sejam adicionados aos elementos HTML.
Com aspas simples:
<elemento identificador_evento = 'código_javascript'>Com aspas duplas:
<elemento identificador_evento = "código_javascript">No exemplo a seguir, um atributo onclick (com código) é adicionado a um elemento <button>:
<button onclick="document.getElementById('demo').innerHTML = Date()">Que horas são?</button>No exemplo acima, o código JavaScript altera o conteúdo do elemento com id = "demo".
No próximo exemplo, o código altera o conteúdo de seu próprio elemento (usando this.innerHTML):
<button onclick="this.innerHTML = Date()">Que horas são?</button>O código JavaScript geralmente possui várias linhas. É mais comum ver atributos de eventos chamando funções:
<button onclick="displayDate()">Que horas são?</button>Eventos HTML comuns
Aqui está uma lista de alguns eventos HTML comuns:
|
Evento |
Descrição |
|
onchange |
Um elemento HTML foi alterado |
|
onclick |
O usuário clica em um elemento HTML |
|
onmouseover |
O usuário move o mouse sobre um elemento HTML |
|
onmouseout |
O usuário afasta o mouse de um elemento HTML |
|
onkeydown |
O usuário pressiona uma tecla do teclado |
|
onload |
O navegador terminou de carregar a página |
A lista é muito mais longa.
O que o JavaScript Pode Fazer?
Os manipuladores de eventos podem ser usados para manipular e verificar entradas do usuário, ações do usuário e ações do navegador:
- Ações que devem ser realizadas sempre que uma página é carregada ou descarregada.
- Ações que devem ser realizadas sempre que uma página é aberta ou fechada.
- Ações que devem ser realizadas quando os usuário clicam em botões.
- Conteúdo que deve ser verificado quando um usuário insere dados.
- E mais...
Muitos métodos diferentes podem ser usados para permitir que o JavaScript trabalhe com eventos:
- Os atributos de evento HTML podem executar o código JavaScript diretamente.
- Atributos de evento HTML podem chamar funções JavaScript.
- Você pode atribuir suas próprias funções de manipulador de eventos a elementos HTML.
- Você pode impedir que eventos sejam enviados ou manipulados.
- E mais...
Você aprenderá muito mais sobre eventos e manipuladores de eventos nos capítulos HTML DOM.
Teste-se com exercícios
O <button>elemento deve fazer algo quando alguém clica nele. Tente consertar!
<botão = "alert ('Hello')"> Clique em mim. </button>
