Os eventos são a maneira que temos em Javascript de controlar as ações dos visitantes e definir um comportamento da página quando se produzam. Quando um usuário visita uma página web e interage com ela se produzem os eventos e com Javascript podemos definir o que queremos que ocorra quando se produzam.

Com Javascript podemos definir o que acontece quando se produz um evento como poderia ser que um usuário clique sobre um botão, edite um campo de texto ou abandone a página.

O manejo de eventos é o cavalo de batalha para fazer páginas interativas, porque com eles podemos responder às ações dos usuários. Até agora neste manual podemos ver muitos exemplos de manejo de um dos eventos de Javascript, o evento onclick, que se produz ao clicar um elemento da página. Até agora aplicamos sempre o evento a um botão, mas poderíamos aplica-lo a outros elementos da página.

Como se define um evento

Para definir as ações que queremos realizar ao produzir um evento utilizamos os manipuladores de eventos. Existem muitos tipos de manipuladores de eventos, para muitos tipos de ações do usuário. O manipulador de eventos se coloca na etiqueta HTML do elemento da página que queremos que responda às ações do usuário.

Por exemplo, temos o manipulador de eventos onclick, que serve para descrever ações que queremos que se executem quando se clique. Se quisermos que ao clicar sobre um botão aconteça alguma coisa, escrevemos o manipulador onclick na etiqueta <INPUT type=button> desse botão. Algo parecido a isto.

<INPUT type=button value="clica-me" onclick="sentencas_javascript...">

Coloca-se um atributo novo na etiqueta que tem o mesmo nome que o evento, neste caso onclick. O atributo se iguala às sentenças Javascript que queremos que se executem ao se produzir o evento.

Cada elemento da página tem sua própria lista de eventos suportados, vamos ver outro exemplo de manejo de eventos, desta vez sobre um menu desdobrável, no qual definimos um comportamento quando mudamos o valor selecionado.

<SELECT onchange="window.alert('Mudou a seleção')">
<OPTION value="opcao1">Opcao 1
<OPTION value="opcao2">Opcao 2
</SELECT>

Nets exemplo, cada vez que se muda de opção mostra uma caixa de alerta. Podemos vê-lo em uma página a parte.

Dentro dos manipuladores de eventos podemos colocar tantas instruções quantas desejarmos, mas sempre separadas por ponto e vírgula. O habitual é colocar uma só instrução, e se se deseja colocar mais de uma, costuma-se criar uma função com todas as instruções e dentro do manipulador se coloca uma só instrução que é chamada à função.

Vamos ver como se colocariam em um manipulador várias instruções.

<input type=button value=Cliacame
   onclick="x=30; window.alert(x); window.document.bgColor = 'red'">

São instruções muito simples como atribuir a x o valor 30, fazer uma janela de alerta com o valor de x e mudar a cor do fundo a vermelho. Podemos ver o exemplo em uma página a parte.

Entretanto, tantas instruções postas em um manipulador ficam um pouco confusas, seria melhor criar uma função assim:

<script>
function executaEventoOnclick(){
    x = 30
    window.alert(x)
    window.document.bgColor = 'red'
}
</script>

<FORM>
<input type=button value=Pulsame onclick="executaEventoOnclick()">
</FORM>

Agora utilizamos mais texto para fazer o mesmo, mas com certeza deve lhe parecer mais claro este segundo exemplo. Se se deseja, pode-se ver esta última página em uma janela a parte

Hierarquia pelo objeto window

Noas manipuladores de eventos tem que se especificar a hierarquia inteira de objetos do navegador, começando sempre pelo objeto window. Isto é necessário porque existe algum browser antigo que não subentende o objeto window quando se escrevem sentenças Javascript vinculadas a manipuladores de eventos.