Eventos JavaScript
Eventos HTML são "coisas" que acontecem com elementos HTML.
Quando o JavaScript é usado em páginas HTML, o JavaScript pode "reagir" a esses eventos.
Eventos HTML
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 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 alguma coisa.
JavaScript permite que você execute código quando os eventos são detectados.
HTML permite que atributos do manipulador de eventos, com código JavaScript , sejam adicionados aos elementos HTML.
Com aspas simples:
<element
event='some JavaScript'>
Com aspas duplas:
<element
event="some JavaScript">
No exemplo a seguir, um onclickatributo (com código) é adicionado a um
<button>elemento:
Exemplo
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</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):
Exemplo
<button onclick="this.innerHTML = Date()">The time is?</button>
O código JavaScript geralmente tem várias linhas. É mais comum ver atributos de eventos chamando funções:
Exemplo
<button onclick="displayDate()">The time is?</button>
Eventos HTML comuns
Aqui está uma lista de alguns eventos HTML comuns:
| Evento | Descrição |
|---|---|
| em mudança | Um elemento HTML foi alterado |
| ao clicar | O usuário clica em um elemento HTML |
| passar o mouse | O usuário move o mouse sobre um elemento HTML |
| fora do mouse | O usuário move o mouse para longe de um elemento HTML |
| onkeydown | O usuário pressiona uma tecla do teclado |
| carregando | O navegador terminou de carregar a página |
A lista é muito maior: W3Schools JavaScript Reference HTML DOM Events .
Manipuladores de eventos JavaScript
Os manipuladores de eventos podem ser usados para manipular e verificar a entrada do usuário, as ações do usuário e as ações do navegador:
- Coisas que devem ser feitas toda vez que uma página é carregada
- Coisas que devem ser feitas quando a página é fechada
- Ação que deve ser executada quando um usuário clica em um botão
- 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 funcione com eventos:
- Atributos de evento HTML podem executar 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 tratados
- E mais ...
Você aprenderá muito mais sobre eventos e manipuladores de eventos nos capítulos HTML DOM.