Web Sites com Ajax
JavaScript
Eventos
Podemos definir um evento como uma ocorrência ou algum acontecimento realizado por uma página, uma ação do mouse, teclado, entre outros.
Todos esses eventos podem ser detectados pelo JavaScript e conseqüentemente realizar alguma ação mediante tal acontecimento.
Em muitos dos casos, os eventos são utilizados em combinação com as funções. Isso significa dizer que a função não será executada até que o evento ocorra, por exemplo: a abertura de uma janela popup quando um link for clicado (onclick).
Vamos conhecer os eventos mais importantes e mais utilizados em nosso dia-a-dia.
onclick
O evento onclick ocorre quando o usuário clica sobre algum elemento da página, por exemplo: um link, uma imagem, um botão, dentre outros.
onclick na realidade quer dizer: pressionar o mouse (mousedown) e liberá-lo (mouseup) sobre um mesmo elemento.
Exemplo
... onclick="javascript:nomeDaFuncao(algumParametroSeHouver);" ...
onload e onunload
O evento onload é executado quando uma página HTML é carregada por completa, incluindo as imagens. Já o evento onunload ocorre quando o usuário sai de uma página.
Eles são opostos entre si, enquanto um é utilizado na entrada o outro trabalha na saída.
Exemplo
<body onload="nomeDaFuncao();" onunload="nomeDa2ºFuncao();">
onmouseover e onmouseout
Esses eventos trabalham de forma oposta, porém são utilizados em conjunto na maioria das vezes.
Enquanto o evento onmouseover é acionado quando o mouse se localiza na área de um elemento, o onmouseout é executado quando ele (mouse) sai dessa área.
Exemplo
onmouseover="funcaoParaMouseOver();"
onmouseout="funcaoParaMouseOut();"
onsubmit
Para realizarmos a validação de um formulário utilizamos o evento onsubmit, o que significa dizer: ao enviar os dados do formulário.
Esse evento trabalha em conjunto com uma função da seguinte forma: associamos ao formulário a chamada de uma função e esta tem por objetivo validar os dados submetidos e retornar um valor verdadeiro (true) ou falso (false).
Se o valor retornado for verdadeiro, o formulário é enviado, caso contrário, o envio é bloqueado até que os dados sejam preenchidos como desejamos.
Exemplo
... onsubmit="return confereFormulario();" ...
O evento onclick também pode chamar uma função para validar um formulário, assim como outros eventos, citei o onsubmit por ser o mais utilizado.
onfocus, onblur e onchange
Esses três eventos são utilizados na maioria das vezes em associação com algum elemento de formulário, sendo o onfocus e onblurantagônicos.
O evento onfocus ocorre quando o usuário clica em um link ou em um campo de texto e o foco é mantido até que outro elemento o ganhe. Já o onblur é executado quando o elemento perde o foco.
O exemplo mais clássico para o evento onchange (ao trocar/mudar) é quando alteramos uma opção na lista de um combobox. Nessa ação, ocorre o onchange.
Exemplos
... onfocus="funcaoParaFocus();" onblur="funcaoParaBlur();" ...
<select ... onchange="funcaoParaChange();" ...>
onkeydown, onkeypress e onkeyup
Esses três eventos são utilizados em associação com o teclado. Com eles podemos por exemplo: contar os caracteres de uma textarea, realizar o preview de algum texto, efetuar uma busca instantânea, dentre outras opções.
Os eventos onkeydown e onkeypress são semelhantes e ocorrem quando uma tecla é pressionada pelo usuário em seu teclado.
Já o onkeyup é executado quando a tecla é liberada, ou seja, ela foi pressionada e em seguida liberada.
Exemplos
... onkeydown="funcaoParaKeyDown();" ...
... onkeypress="funcaoParaKeyPress();" ...
... onkeyup="funcaoParaKeyUp();" ...
