Gestão de Eventos Javascript
-
Upload
flaviano-silva -
Category
Documents
-
view
141 -
download
0
Transcript of Gestão de Eventos Javascript
![Page 1: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/1.jpg)
∞ 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 clique com o rato 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 lista 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.
abort Ocorre quando o carregamento do objecto é abortado.
blur Ocorre quando o foco é retirado do elemento.
change Ocorre quando o valor dum elemento do formulário é mudado pelo utilizador.
click Ocorre quando existe um clique de rato sobre um elemento do formulário.
dblclick Ocorre quando existe um duplo clique de rato sobre um elemento.
error Ocorre quando há erro no carregamento do objecto.
focus Ocorre quando o foco de entrada de dados é atribuído a um elemento.
keydown Ocorre quando uma tecla é pressionada.
keypress Ocorre quando uma tecla é pressionada e largada.
keyup Ocorre quando uma tecla é largada.
load Ocorre quando uma página é carregada no browser.
![Page 2: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/2.jpg)
mousedown Ocorre quando o botão do rato é pressionado.
mouseout Ocorre quando o rato é afastado do objecto.
mouseover Ocorre quando o cursor do rato é movido sobre um elemento.
resize Ocorre quando o objecto é modificado no seu tamanho.
select Ocorre quando o utilizador selecciona um elemento.
submit Ocorre quando o utilizador submete o formulário com o botão submit.
unload Ocorre quando 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 um clique de rato sobre o elemento em causa, e para o retirar basta um clique 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 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
![Page 3: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/3.jpg)
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, tem 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
CheckboxRadioSubmitReset
![Page 4: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/4.jpg)
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
![Page 5: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/5.jpg)
Link onclick click ondblclick dblclick onkeydown keydown onkeypress keypress onkeyup keyup onmousedown mousedown onmouseout mouseout onmouseover mouseover onmouseup mouseup
![Page 6: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/6.jpg)
∞ Gestão de Eventos :. | Parte II |
Password onblur blur onfocus focus
Select onblur blur onchange change
Text onblur blur onfocus focus onchange change onselect select
TextArea onblur blur onfocus focus onchange onkeydown keydown onkeypress keypress onkeyup onselect select
WindowFramesetFrame onblur blur onerror error onfocus focus onload load onresize
![Page 7: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/7.jpg)
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 clique 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" type="text/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)" > <br></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
![Page 8: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/8.jpg)
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> <br>
<a href = "pag3.html" onmouseover = "window.status = 'Este link aponta para a pagina 3'; return true"> Página Três </a> <br>
</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 estado, 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 aplicados a um conjunto variado de objectos HTML, vejamos o seguinte exemplo, trata-se de 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.
![Page 9: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/9.jpg)
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" type="text/javascript"> function jump() { window.open("pag2.html"); }</script>
</head>
<body onload = "jump()"> </body>
</html>
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.
![Page 10: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/10.jpg)
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 uma 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, como era tradicional no HTML.
Vejamos o seguinte exemplo:
<html><head><title> Teste de eventos </title></head>
<body>
<script language="Javascript" type="text/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>
![Page 11: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/11.jpg)
∞ Gestão de Eventos :. | Parte III |
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 uma 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.
<html><head><title>Encomenda de Pizzas</title>
<script language="Javascript" type="text/javascript">
...
function sel_pizza(form) { // função gestora de evento if (form.pizza.selectedIndex == 4) { window.alert("Atenção: Esta pizza é demorada! (30 minutos)"); } }
...
</script></head>
<body>
...
<td> Qual a Pizza a encomendar? </td> <td> <select name = "pizza" onChange = "sel_pizza(this.form)"> <option/> <option> Marguerita </option> <option> Capriciosa </option>
![Page 12: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/12.jpg)
<option> Quatro Estações </option> <option> Calzone </option> <option> Tropical </option> <option> Maritima </option> </select> </td>
...
</body></html>
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. 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ã.
<html><head><title>Encomenda de Pizzas</title>
<script language="Javascript" type="text/javascript">
...
function sel_morada() { // função gestora de evento window.alert("Atenção: Coloque uma referenda para identificação do local (Exemplo: à frente do bar do zé...)"); }
...
</script></head>
<body>
![Page 13: Gestão de Eventos Javascript](https://reader036.fdocumentos.com/reader036/viewer/2022082408/5571f9bc4979599169904ed1/html5/thumbnails/13.jpg)
...
<td> Morada: </td> <td> <input type = "text" name = "morada" size = "40" onfocus = "sel_morada()" > </td>
...
</body></html>