Professional Documents
Culture Documents
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...
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.
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 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:
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
Checkbox
Radio
Submit
Reset
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
∞ 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
Window
Frameset
Frame
onblur
blur
onerror
error
onfocus
focus
onload
load
onresize
resize
onunload
unload
O código é o seguinte:
<html>
<head>
<title> Teste de eventos </title>
</head>
<body>
<form>
valor: <input type = "text" name = "campo1" onfocus = "coloca_nome(this.form)" >
<br>
</form>
</body>
</html>
<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>
</form>
</body>
</html>
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.
<html>
<head>
<title> Teste de eventos </title>
</head>
</html>
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.
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 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.
<html>
<head>
<title> Teste de eventos </title>
</head>
<body>
</body>
</html>
∞ Gestão de Eventos :. | Parte III |
Exemplos Práticos
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>
</head>
<body>
...
...
</body>
</html>
<html>
<head>
<title>Encomenda de Pizzas</title>
...
...
</script>
</head>
<body>
...
...
</body>
</html>