Tratamento de Eventos

Durante o carregamento e exibição de uma página HTML, diversos eventos podem acontecer. Esses eventos podem ser cliques e movimentos do mouse ou teclas digitadas pelo usuário, além de muitos outros eventos que serão discutidos nesta seção.

Esses eventos ocorrem em uma diversidade de situações diferentes e alguns deles são específicos de alguns tipos de componentes. Por exemplo, o evento de tecla digitada pode ser produzido quando o usuário digita algo sobre um componente de texto (como o textarea ou input text).

Já em elementos como imagens ou listas não ordenadas, eventos de digitação, como o exemplo anterior, não existem e nem teria muito sentido, já que esses tipos de elementos não interagem com o teclado, do ponto de vista de usabilidade. Porém mesmo para esses tipos de elementos outros eventos podem ocorrer, como por exemplo quando o usuário passa o ponteiro do mouse sobre eles ou quando o carregamento de ima imagem é finalizado. Os eventos são produzidos normalmente em vários elementos da página Web ao longo do seu carregamento e utilização, assim como em diversos momentos onde o usuário navega pela página. Mas e o que o JavaScript tem a ver com os eventos produzidos por elementos HTML?

Finalizada essa visão geral sobre eventos em HTML, resta a questão de saber o que o JavaScript tem a ver com os eventos produzidos por elementos HTML.

Apesar de não parecer claro em um primeiro momento, essa é uma das partes mais importantes da utilização de JavaScript em páginas Web. A grande resposta para essa charada é que esses eventos podem ser tratados pelo programador ou, em outras palavras, o programador pode definir o que o programa deve fazer quando um determinado evento acontecer, e isso é especificado em JavaScript!

Por exemplo, o programador pode definir uma ação (um código JavaScript) que deve ser executada ao se passar o mouse por cima de uma imagem específica. O trecho de código que segue, por exemplo, define que a função abreAlerta() deve ser executada quando o usuário passar o mouse por cima da imagem (evento onMouseOver).

Cada tag HTML suporta diferentes tipos de eventos. A maioria dos eventos é precedida da palavra ON, como foi o caso do exemplo (Evento de MouseOver, ou seja, passar o mouse por cima, é tratado informando a propriedade onMouseOver da tag IMG).

Outro evento que pode ser tratado na tag IMG é o evento de MouseOut, através da propriedade onMouseOut. Esse evento é gerado quando o usuário sai com o mouse de cima da imagem. O exemplo a seguir ilustra o tratamento de múltiplos eventos de um mesmo elemento HTML.

Nesse caso, os eventos de entradas e saídas de mouse da área imagem são tratados pelas funções contOver() e contOut(), enquanto o clique em qualquer local da página executa a função imprimeAlerta().

Existe uma infinidade de eventos a serem tratados. Alguns eventos são comuns a vários tipos de elementos, enquanto outros só existem para determinados elementos. O Quadro 2 contém alguns eventos que são comuns a vários tipos de elementos. Para saber sobre outros eventos existentes por tipo de elemento HTML acesse:

<http://www.htmlquick.com/reference/events.html>

E, assim, chegamos ao fim da nossa primeira aula sobre JavaScript. Na próxima aula você verá aspectos avançados do JavaScript, em particular como acessar e alterar os elementos de formulários, imagens e outros elementos HTML.