Gestão
de Eventos
Eventos
são acontecimentos ocorridos quando existe uma
qualquer acção do utilizador sobre uma página Web, tais como, pressionar um
botão de um formulário, efectuar um dique com o rato por sobre um
elemento de texto, carregar uma página, etc...
O JavaScript detecta e interpreta os
diversos tipos de eventos, sendo tarefa do programador a construção das funções
de código correspondentes a cada uma das situações ( funções gestoras de
evento).
A tabela a seguir apresentada mostra uma lista
dos eventos disponíveis no JavaScript.
Chama-se a atenção para o facto de que esta
lista considera eventos que não estavam disponíveis em várias versões antigas de
browsers e de JavaScript, pelo que deverá sempre testar os seus
programas nas versões de browser que estiver a tornar como objectivo.
Evento: |
Ocorre quando... |
abort |
carregamento do objecto é abortado. |
blur |
o foco é retirado do elemento. |
change |
o valor dum elemento do formulário é
mudado pelo utilizador. |
click |
existe um clique de rato sobre um
elemento do formulário. |
dblclick |
existe um duplo clique de rato sobre um
elemento. |
error |
há erro no carregamento do objecto. |
focus |
o foco de entrada de dados é atribuído a
um elemento. |
keydown |
uma tecla é pressionada. |
keypress |
uma tecla é pressionada e largada. |
keyup |
uma tecla é largada. |
load |
uma página é carregada no browser. |
mousedown |
o botão do rato é pressionado. |
mouseout |
o rato é afastado do objecto. |
mouseover |
o cursor do rato é movido por sobre um
elemento. |
resize |
o objecto é modificado no seu tamanho. |
select |
o utilizador selecciona um elemento. |
submit |
o utilizador submete o formulário (botão
submit). |
unload |
a página é abandonada pelo utilizador. |
Acerca do foco, uma aplicação de entrada de
dados tem normalmente apenas uma zona seleccionada para entrada dos dados, num
determinado instante. No caso dos formulários, cada elemento que os constitui
pode, em cada instante, estar ou não com o foco de entrada, isto é, está
acessível ou não para entrada de dados.
Para atrair o foco para um determinado elemento
de um formulário, basta ao utilizador um clique de rato sobre o elemento
em causa, e para o retirar basta um clique de rato numa zona fora do
formulário.
Funções Gestoras de Evento
Para o JavaScript efectuar alguma acção
útil com os eventos, tem que existir associada a cada elemento, e a cada tipo de
evento, uma função gestora de evento (event handler). Basicamente, esta é
uma função JavaScript normal, mas que só é executada quando o evento a
que ela estiver associada ocorrer no elemento correspodente.
Uma função gestora de evento pode ser definida
para um elemento HTML (não só para elementos de formulários), utilizando para
tal a seguinte sintaxe:
<elemento Tipo_de_Gestor_Evento = "Função
JavaScript">
Exemplos de utilização de funções gestoras de
eventos já foram apresentados, consistindo em instruções do tipo:
<input type="button" onClick=
"carregar(this.form)" >
<form … onSubmit=
"submete(document.form)">
O “tipo_de_Gestor_Evento"
consiste, no tipo de função gestora de evento a
utilizar, associada ao elemento em causa. Este tipo de função está ligado de
forma directa ao tipo de evento que se pretende interpretar (o tipo de gestor
"onClick" está associado directamente ao evento "click").
Para um conjunto de objectos HTML que podem ter
eventos associados, é a seguinte lista de tipos de gestores de evento que podem
ser empregues:
Elemento |
Gestor de Evento |
Evento |
Area |
onmouseover |
mouseover |
onmouseout |
mouseout |
ondblclick |
dblclick |
Body |
onclick |
click |
ondblclick |
dblclick |
onkeydown |
keydown |
onkeyup |
keyup |
onkeypress |
keypress |
onmousedown |
mousedown |
onmouseup |
mouseup |
Button |
onblur |
blur |
onclick |
click |
onfocus |
focus |
onmousedown |
mousedown |
onmouseup |
mouseup |
Checkbox |
onblur |
blur |
onclick |
click |
onfocus |
focus |
Document |
onclick |
click |
ondblclick |
dblclick |
onkeydown |
keydown |
onkeypress |
keypress |
onkeyup |
keyup |
onmousedown |
mousedown |
onmouseup |
mouseup |
File Upload |
onblur |
blur |
onchange |
change |
onfocus |
focus |
Form |
onreset |
reset |
onsubmit |
subrnit |
Img |
onabort |
abort |
onerror |
error |
onkeydown |
keydown |
onkeypress |
keypress |
onkeyup |
keyup |
onload |
load |
Link |
onclick |
click |
ondblclick |
dblclick |
onkeydown |
keydown |
onkeypress |
keypress |
onkeyup |
keyup |
onmousedown |
mousedown |
onmouseout |
mouseout |
onmouseover |
mouseover |
onmouseup |
mouseup |
Password |
onblur |
blur |
onfocus |
focus |
Radio |
onblur |
blur |
onclick |
click |
onfocus |
focus |
Reset |
onblur |
blur |
onclick |
click |
onfocus |
focus |
Select |
onblur |
blur |
onchange |
change |
Submit |
onfocus |
focus |
onblur |
blur |
onclick |
click |
Text |
onfocus |
focus |
onblur |
blur |
onchange |
change |
onfocus |
focus |
onselect |
select |
TextArea |
onblur |
blur |
onchange |
change |
onfocus |
focus |
onkeydown |
keydown |
onkeypress |
keypress |
onkeyup |
keyup |
onselect |
select |
Window
Frameset
Frame
|
onblur |
blur |
onerror |
error |
onfocus |
focus |
onload |
load |
onresize |
resize |
onunload |
unload |
Conforme se pode comprovar nos exemplos que
seguidamente se apresentam, a utilização das funções gestoras de evento faz-se
sem dificuldade, utilizando, para tal a sintaxe que vimos atrás e tendo em
atenção o evento que se está a pretender captar.
Começamos por um exemplo de um campo de texto
integrado num formulário, em que se vai utilizar o evento focus, que é
activado quando o utilizador da página efectua um dique de rato sobre o
elemento, atraindo assim o foco.
O código é o seguinte:
<html>
<head>
<title> Teste de eventos </title>
</head>
<body>
<script language="JavaScript"> // Função
Gestora do Evento
function coloca_nome(form) {
form.campo1.value = "Teste";
}
</script>
<form>
valor: <input type="text" name="campo1" onfocus= "coloca_nome(this.form)" > <p/>
</form>
</body>
</html>
A ideia é que, quando se coloca o foco no campo
de texto, é preenchido automaticamente o campo com o valor "Teste". Ao ser
colocado o foco no elemento de texto, é chamada a função gestora de evento
"coloca_nome", do tipo "onFocus". Esta simplesmente coloca a
propriedade "value" do objecto "form.campo1" com o valor "Teste".
No exemplo seguinte, temos um evento associado
a um link HTML, neste caso, o "mouseover". É utilizada uma função
gestora de evento de tipo onmouseover, que responde a uma acção de passar
com rato por cima do link. A função chamada em caso de evento está neste
caso embebida dentro da própria linha de chamada da função gestora do evento:
<html>
<head>
<title> Teste de eventos </title>
</head>
<body>
<form>
<a href="pag2.html"
onmouseover="window.status='Este link aponta para a pagina 2';
return true"> Página Dois </a> <p/>
<a href="pag3.html"
onmouseover="window.status='Este link aponta para a pagina 3';
return true"> Página Três </a> <p/>
</form>
</body>
</html>
Repare-se no pormenor da utilização das plicas
('), em vez de aspas, na linha de chamada da função gestora de evento, uma vez
que a utilização de aspas no interior das aspas geraria uma situação de
ambiguidade sintáctica,
Ao executar o programa, surgem os dois links
na janela do browser e, ao passar com o rato por cima de um deles, a
função gestora de evento é chamada como resposta ao evento "mouseover", A
acção resume-se a colocar um texto descritivo do link em causa na barra
de status, na parte de baixo da janela do browser.
Este evento não tem naturalmente nada a ver com
a selecção do link propriamente dita, que pode ser feita com um clique do
rato.
Para demonstrar que os eventos podem ser aplica
os a um conjunto variado de objectos HTML, vejamos o seguinte exemplo, trata-se
e uma versão muito simples de uma página que efectua o desvio do browser
do utilizador para uma página diferente daquela que é carregada.
Para isso, utiliza-se um evento associado ao
elemento <body>, de início do corpo do documento, pelo que estamos a procurar
captar o evento de carregamento da página. Pela tabela que vimos atrás, este
evento corresponde ao objecto "document" e a função gestora do evento a
utilizar é do tipo "onload() " ,
A página utilizada é a seguinte:
<html>
<head>
<title> Teste de eventos </title>
<script language="JavaScript">
function jump() {
window.open("pag2.html");
}
</script>
</head>
<body onload="jump()" />
</body>
</htrnl>
Logo que a página é carregada, é de imediato
carregada a nova página "pag2.html". O evento responsável é o "load",
associado ao objecto "document".
Neste caso, estamos a optar por uma secção
body vazia, enquanto que num outro caso anterior existia uma mensagem que
aparecia durante um certo período de tempo e só depois o link era aberto.
A função gestora de evento "jump()"
efectua o carregamento da nova página utilizando o método "window.open()",
Naturalmente que a visualização desta página é feita numa janela de
browser independente da primeira, que fica vazia por carregar uma página com
corpo vazio.
Para além de gerir os eventos que ocorrem, o
JavaScript tem a possibilidade de os provocar. Para tal utilizam-se nos
formulários e com os seus objectos um conjunto de métodos, cuja execução
equivale à ocorrência dos eventos propriamente ditos.
Métodos:
blur()
Retira o foco de um objecto.
click()
Clique de rato sobre o elemento.
focus()
Coloca o foco num objecto.
select()
Selecciona o conteúdo texto contido do objecto.
submit()
Submete um formulário.
As aplicações possíveis para estes métodos são
variadas. Eles serão executados sempre que for vantajoso em termos de
programação substituir o acto físico de provocar um evento por parte do
utilizador por urna instrução de código. Por exemplo, em certas circunstâncias
pode ser útil submeter um formulário, mesmo sem utilizar um botão de Submit,
corno era tradicional no HTML.
Vejamos o seguinte exemplo:
<html>
<head>
<title> Teste de eventos </title>
</head>
<body>
<script language="JavaScript">
function mudou(form) {
form.submit();
}
</script>
<form method=post action="submit_script.cgi">
Qual o seu nome?
<input type="text" name="texto" onChange=
"mudou(this.form)" >
</form>
</body>
</html>
Neste caso, logo que exista um evento change
associado ao campo de texto, é produzida uma acção de submit
equivalente ao acto de pressionar o botão submit, mesmo sem este existir!
Esta acção pode ser produzida com um simples ENTER após o preenchimento do
campo.
Exemplos Práticos
Para vermos na prática as vantagens de
utilizarmos a manipulação de eventos em
JavaScript,
vejamos como poderíamos modificar o programa
que fizemos para possibilitar a encomenda de Pizzas, agora com a hipótese
de validação local por elemento do formulário.
Em primeiro lugar, imaginemos que queremos
informar o cliente, que no caso de escolher urna Pizza Calzone terá que
esperar um pouco mais. Assim, no elemento de escolha, testamos o evento de
mudança de elemento seleccionado e, no caso de ser o de índice n° 4
(Calzone), enviamos uma janela e aviso.
As alterações a efectuar são muito simples. O
elemento em causa terá uma função de gestão de evento associada:
<head>
…
<script language = "JavaScript">
…
function sel_pizza(form) {
// função gestora de evento
if (form.pizza.selectedIndex == 4) {
window.alert("Atenção: Esta pizza é
demorada! (25 minutos)");
}
}
…
</script>
</head>
…
<tr>
<td> Qual a Pizza a encomendar?
</td>
<td>
<select name="pizza"
onChange="sel_pizza(this.form)">
<option/>
<option> Marguerita </option>
<option> Capriciosa </option>
<option> Quatro Estações </option>
<option> Calzone </option>
<option> Tropical </option>
<option> Maritima </option>
</select>
</td>
…
Tudo o resto se mantém idêntico, incluindo as
validações globais antes da submissão do formulário. Contudo, a diferença está
no processamento deste evento local, que é efectuado sempre que existir uma
mudança do elemento que estiver seleccionado na lista de escolha das Pizzas.
Vejamos um outro exemplo, com um tipo diferente
de objecto. Utilizando ainda o mesmo programa de encomenda de Pizzas, é
agora pretendido que, quando o utilizador for ao campo de preenchimento da
morada, indique uma referência para o local onde será feita a entrega da comida.
Para isso, recorremos ao evento focus, no campo de texto da morada. Isto
significa que, assim que o utilizador da página seleccionar o campo em causa,
será logo notificado do assunto.
As alterações a efectuar ao programa são
unicamente: a criação de uma função gestora do evento em causa (onFocus)
e escrever esta função com um simples envio de uma Janela alert para o
ecrã:
<head>
…
<script language = "JavaScript">
…
function sel_morada() {
// função gestora de evento
window.alert("Atenção: Coloque uma
referenda para identificação do local
(Exemplo: ao lado do Café do Chico...)");
}
…
</script>
</head>
…
<tr>
…
<td> Morada: </td>
<td> <input type = "text" name=
"morada" size = "40" onfocus= "sel_morada()"> </td>
</tr>
…
|