Uma das características da linguagem javascript, é o fato dela ser uma linguagem dirigida por eventos, ou seja, ela é projetada de forma que ela possa ser programada para reagir sempre que algum evento ocorre.
Um evento é um acontecimento envolvendo alguma atitude do usuário (o movimentar do mouse, o pressionar de uma tecla, o envio de um formulário, etc) ou o próprio funcionamento do navegador (o carregamento de uma página para a exibição, não conseguir carregar uma imagem, etc).
As tabelas abaixo mostram os principais eventos disponíveis em javascript:
Eventos do Mouse: |
| onMouseOver |
- |
passar o cursor do mouse sobre o elemento.
|
| onMouseOut |
- |
retirar o mouse de cima do elemento.
|
| onClick |
- |
clique do mouse sobre um elemento.
|
| onMouseDown |
- |
botão do mouse pressionado.
|
|
|
Eventos da Página (window): |
| onLoad |
- |
página terminou de ser carregada
|
| onUnload |
- |
página foi substituída por outra
|
| onFocus |
- |
elemento ganhou o foco do teclado (por exemplo janela ou campo de digitação de texto num formulário)
|
| onBlur |
- |
elemento perdeu o foco do teclado
|
|
|
Eventos do Teclado: |
| onKeyPress |
- |
tecla pressionada
|
|
|
Eventos do Formulário: |
| onSubmit |
- |
formulário enviado
|
| onReset |
- |
formulário reinicializado
|
| onSelect |
- |
elemento foi selecionado
|
| onChange |
- |
elemento perdeu o foco do teclado e foi modificado
|
|
|
Cada objeto contém um conjunto de eventos associados. O tratamento destes eventos é feito associando trechos de código ou chamadas de funções a eles através de um atributo da tag relativa ao elemento considerado. Para cada tipo de evento há um atributo específico. Veja abaixo exemplos de tags html onde foram incluídos os atributos para tratar eventos com javascript.
<body onload="" onunload="" >
<a onclick="" onmouseover="" onmouseout="" >
<form onsubmit="" onreset="" >
<input type="button/reset/submit/radio/checkbox" onclick="" >
<input type="text/password" onblur="" onchange="" onfocus="" onselect="" >
<textarea onblur="" onchange="" onfocus="" onselect="">
<select onblur="" onchange="" onfocus="">
<img onload="" onerror="">
Respondendo a eventos