Eventos HTML são "coisas" que acontecem a elementos HTML.
Quando JavaScript é usado em páginas HTML, JavaScript podem "reagir" sobre 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 de HTML:
- Uma página web HTML tiver terminado o carregamento
- 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 são detectados eventos.
HTML permite que atributos manipulador de eventos, com o código de JavaScript, para ser adicionado a elementos HTML.
Com aspas simples:
< some-HTML-element
some-event = ' some JavaScript ' >Com aspas duplas:
< some-HTML-element
some-event = " some JavaScript " >No exemplo a seguir, um onclick atributo (com código), é adicionado a um elemento de botão:
Exemplo
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Tente você mesmo " No exemplo acima, o código JavaScript muda o conteúdo do elemento com id="demo" .
No próximo exemplo, o código altera o conteúdo do seu próprio elemento (usando this .innerHTML ):
código JavaScript é muitas vezes várias linhas. É mais comum ver os atributos de eventos funções chamando:
Eventos HTML comum
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 move o mouse longe de um elemento HTML |
| onkeydown | O usuário pressiona uma tecla do teclado |
| onload | O navegador terminar o carregamento da página |
A lista é muito maior: w3ii JavaScript Referência HTML DOM Events .
O JavaScript pode fazer?
Os manipuladores de eventos pode ser usado para segurar, e verificar, a entrada do usuário, as ações do usuário, e as ações do navegador:
- Coisas que devem ser feitas cada vez que uma página é carregada
- Coisas que devem ser feitas quando a página é fechada
- Ação que deve ser realizada quando um usuário clica em um botão
- O conteúdo que deverá ser verificada quando os dados do usuário insumos
- E mais ...
Muitos métodos diferentes podem ser usados para deixar o trabalho JavaScript com os eventos:
- atributos de eventos HTML podem executar código JavaScript diretamente
- atributos do evento HTML pode chamar funções de JavaScript
- Você pode atribuir as suas próprias funções manipulador de eventos a elementos HTML
- Você pode impedir que eventos sejam enviados ou sendo tratado
- E mais ...
Você vai aprender muito mais sobre os eventos e manipuladores de eventos no HTML DOM capítulos.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »