Javascript - Os eventos

Dezembro 2016


O que chamamos de um evento?


Os eventos são ações do usuário, que darão origem à uma interatividade. O evento, por excelência, é o clique do mouse, porque é o único que o HTML gerencia. Graças ao JavaScript é possível combinar funções e métodos a eventos tais como a passagem do mouse sobre uma área, a mudança de um valor,...


São os gerenciadores de eventos que permitem associar uma ação a um evento. A sintaxe de um gerenciador de eventos é a seguinte:

onEvenement="Action_Javascript_ou_Fonction();"



Quando usado em um hiperlink, por exemplo, a sintaxe é a seguinte:

<A href="URL" "onEvenement='Action_Javascript_ou_Fonction();'">Lien</a>


Os gerenciadores de eventos são associados a objetos e seus códigos se inserem na tag dos mesmos...

Lista dos eventos



EventoDescriçãoTesteEfeito
Abort
(onAbort)
Este evento acontece quando o usuário interrompe o carregamento da imagem
Blur
(onBlur)
Ocorre quando o elemento perde o foco, ou seja, quando o usuário clica fora do elemento, este não será mais selecionado como estando ativo.<form><input type="Text" size=6 onBlur="document.blur.src='images/on.gif';"></form>
Change
(onChange)
Ocorre quando o usuário altera o conteúdo de um campo de dados.<form><input type="Text" size=6 onChange="document.images['change'].src='images/on.gif';"></form>
Click
(onClick)
Ocorre quando o usuário clica no elemento associado ao evento. [javascript:; Test]

<form name="onSubmit"><INPUT TYPE="button" value="Testar" onClick="document.images['img_click2'].src='images/on.gif';"></form>
dblclick
(onDblclick)
Ocorre quando o usuário clica duas vezes no elemento associado ao evento (um hiperlink ou um elemento de formulário). Este evento só é suportado pelas versões do JavaScript 1.2 e superior [javascript:; Test]

<form name="onDblClick"><INPUT TYPE="button" value="Tester" onDblclick="document.images['img_dblclick2'].src='images/on.gif';"></form>
dragdrop
(onDragdrop)
Ocorre quando o usuário efetua um arrastar-largar na janela do navegador.
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
error
(onError)
É desencadeada quando ocorre um erro durante o carregamento da página.
Este evento faz parte do JavaScript 1.1.
Focus
(onFocus)
Ocorre quando o usuário dá foco a um elemento, isso significa que este elemento foi selecionado como estando ativo
<form><input type="Text" size=6 onFocus="document.focus.src='images/on.gif';"></form>

<script language="Javascript">



</script>
keydown
(onKeydown)
Ocorre quando o usuário pressiona uma tecla do seu teclado.

Este evento só é suportado pelas versões do JavaScript 1.2 e superior
<form name="test_keyup"><input type="Text" name="emission" size=6></textarea>
<input type="Text" name="reception" size=6></form>
keypress
(onKeypress)
Ocorre quando o usuário mantém pressionada uma tecla do seu teclado.
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
<form name="test_keypress"><input type="Text" name="emission" size=6></textarea>
<input type="Text" name="reception" size=6></form>
keyup
(onKeypress)
Ocorre quando o usuário solta uma tecla do seu teclado antpressionada anteriormente.
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
<form name="test_keyup"><input type="Text" name="emission" size=6></textarea>
<input type="Text" name="reception" size=6></form>
Load
(onLoad)
Ocorre quando o navegador do usuário carrega a página em curso
MouseOver
(onMouseOver)
Ocorre quando o usuário põe o cursor do mouse acima de um elemento [javascript:; Test]
MouseOut
(onMouseOut)
Ocorre quando o cursor do mouse deixa um elemento.
Este evento faz parte do Javascript 1.1.
[javascript:; Test]
Reset
(onReset)
Ocorre quando o usuário apaga os dados de um formulário com o botão Reset.<form onReset="document.images['img_reset'].src='images/on.gif';"><input type="Reset" value="Reset"></form>
Resize
(onResize)
Ocorre quando o usuário redimensiona a janela do navegador
Select
(onSelect)
Ocorre quando o usuário seleciona um texto (ou uma parte de um texto) em um campo do tipo "text" ou "textarea"<form name="test_select"><input type="Text" value="Test" name="emission" onSelect="CaptureSelect();" size=6></form>
Submit
(onSubmit)
Ocorre quando o usuário clica no botão de submissão de um formulário (o botão que permite enviar o formulário)
Unload
(onUnload)
Ocorre quando o navegador do usuário sai da página em curso

Associação dos eventos com os objetos


Nem todo evento pode ser associado a qualquer objeto. É claro que um evento OnChange não poderá se aplicar a um hiperlink. Veja uma tabela recapitulando os objetos que podem ser associados a cada evento:


EventosObjetos interessados
abort Image
blur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
change FileUpload, Select, Submit, Text, TextArea
click Button, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclick document, Link
dragdrop window
error Image, window
focus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
keydown document, Image, Link, TextArea
keypress document, Image, Link, TextArea
keyup document, Image, Link, TextArea
load Image, Layer, window
mousedown Button, document, Link
mousemove Nenhum especificamente
mouseout Layer, Link
mouseover Area, Layer, Link
mouseup Button, document, Link
move window
reset form
resize window
select text, Textarea
submit Form
unload window

Alguns exemplos de eventos


A melhor maneira de aprender a utilizar os eventos é praticar a escrita de pequenos códigos...

Para te inspirar, pense em olhar os arquivos de origem de certas páginas da web, mas pense sempre em respeitar os autores dos códigos, não fazendo um copiar/colar dos seus scripts sem o seu consentimento (em geral, o ideal é citar a fonte do javascript, que foi recuperada...).

Abertura de uma caixa de diálogo durante um clique


O código que corresponde a uma caixa de diálogo é muito simples:

window.alert("Seu Texto"); 


Trata-se agora de pedir ajuda de um evento no atributo "href" de um hiperlink:

<html>  
<head>  
<title>Abertura de uma caixa de diálogo durante um clique</title>  
</head>  
<body>  
   
<a href="javascript:;"  
onClick="window.alert('Mensagem de alerta a ser utilizado com moderação');">  
Clique aqui!</a>  
   
</body>  
</html>



Análise do script:

  • O gerenciador do evento onClick foi inserido nao tag d hiperlink <A href...
  • O único objetivo do script é fazer aparecer uma caixa de diálogo, assim, não queremos que o link nos leve para outra página; então, é preciso inserir "javascript:;" no atributo href para informar ao navegador que você deseja permanecer na página atual. Não coloque um atributo vazio, para não correr o risco de revelar o conteúdo do seu diretório para os seus visitantes...
  • Observe o uso do \' na frase "Mensagem de alerta a ser usada com moderação"



O sinal de barra invertida (\) antes das aspas permite informar ao navegador que ele não deve interpretá-lo como um delimitador de cadeia, mas como um simples caractere para evitar que ele crie um erro!


Resumo do efeito do script:
[javascript:; Clique aqui!]

Modificação de uma imagem ao passar sobre um link com o cursor do mouse


Pode ser divertido jogar com o gerenciador OnMouseOver para criar um menu interativo, que muda com a passagem do mouse. Podemos até mesmo adicionar o gerenciador OnMouseOut para restaurar a imagem original quando o cursor sai da imagem ( Lembrete: Seu uso é limitado aos navegadores que suportam o Javascript 1.1 e superior!) . Este tipo de efeito é chamado rollover .

Script:

<html>  
<head>  
<title>Modificação de uma imagem na passagem do mouse</title>  
</head>  
<body>  
   
<a href="javascript:;"  
onMouseOver="document.img_1.src='image2.gif';"  
onMouseOut="document.img_1.src='image1.gif';">  
<img name="img_1" src="image1.gif"> </a>  
   
</body>  
</html>



Análise do script:

  • Para associar um evento a uma imagem, é preciso que ela seja considerada como um link, assim, coloca-se a tag <img ...> entre as tags <a ... > e </a>
  • O evento onMouseOut limita-se a navegadores que ofereçam suporte a JavaScript 1.1 ou superior </ital>



Visualização do efeito do script:
[javascript:; [Image: images/on.gif]]


Tradução feita por Lucia Maurity y Nouira


Veja também :
Este documento, intitulado « Javascript - Os eventos »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.