JavaScript – Controladores de eventos

onAbort
Executa um código JavaScript quando o usuário interrompe o carregamento de uma imagem, por exemplo, com um clique no botão Parar. Deve ser usado com o objeto imagem (IMG) de HTML.
Exemplo:
<IMG NAME=”foto” SRC=”minha_foto.gif” onAbort=”alert(‘Você não viu minha foto’)”>

onBlur
Executa um código JavaScript quando um elemento, janela ou quadro, perde o foco. Usado para Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window, na forma onBlur=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

Exemplo:
<INPUT TYPE=”text” VALUE=”" NAME=”nome” onBlur=”verificarNome(this.value)”>

Onde “verificarNome(n)” é uma função (a ser desenvolvida) para verificar se o usuário inseriu um nome válido.

onChange
Executa um código JavaScript quando um campo perde o foco e tem seu valor modificado. Usado para FileUpload, Select, Text, Textarea, na forma onChange=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<INPUT TYPE=”text” VALUE=”" NAME=”nome” onChange=”verificarNome(this.value)”>

Onde “verificarNome(n)” é uma função (a ser desenvolvida) para verificar se o usuário inseriu um nome válido.

onClick
Executa um código JavaScript quando um objeto é clicado. Usado para Button, document, Checkbox, Link, Radio, Reset, Submit, na forma onClick=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo 1:
<A HREF=”http://www.abc.com.br/” onClick=”return confirm(‘Abre ABC?’)”>Empresa AB</A>
Se o usuário clica no link, abre a caixa de confirmação. Se, nessa caixa, o botão Cancelar é clicado, o link não é aberto.
Exemplo 2:
<INPUT TYPE=”button” VALUE=”Resultado” onClick=”calcular(this.form)”>
Ao clicar no botão, é chamada a função “calcular(a)” (a ser desenvolvida).

onDblClick
Executa um código JavaScript quando um duplo clique é dado no objeto. Usado para document, Link, na forma onDblClick=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<form>
<INPUT Type=”button” Value=”Teste” onDblClick=”alert(‘Foi dado um duplo clique’)”>
</form>

onDragDrop
Executa um código JavaScript quando um objeto é arrastado para a janela do navegador. Usado para window, na forma onDragDrop=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onError
Executa um código JavaScript quando um erro ocorre no carregamento de uma janela ou imagem. Usado para Image, window, na forma onError=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
O evento só ocorre em caso de erro de sintaxe no código ou erro em tempo de execução do mesmo. Não reporta erros do navegador.
Se é forçado para nulo, suprime mensagens de erro.

Exemplo 1:
<IMG NAME=”foto” SRC=”foto.gif” ALIGN=”left” BORDER=”2″ onError=”null”>
Exemplo 2:
<SCRIPT language=”javascript”_>
window.onerror=null
</SCRIPT>
<IMG NAME=”foto” SRC=”foto.gif” ALIGN=”left” BORDER=”2″>

O primeiro exemplo suprime mensagens de erro apenas no carregamento da imagem foto.gif. O segundo exemplo suprime para toda a janela.

onFocus
Executa um código JavaScript quando o objeto recebe o foco. Usado para Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window, na forma onFocus=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<INPUT TYPE=”text” VALUE=”" NAME=”nome” onFocus=”verificarNome(this.value)”>
Onde “verificarNome(n)” é uma função (a ser desenvolvida) para verificar se um nome válido existe no campo toda vez que esse campo recebe o foco.

onKeyDown
Executa um código JavaScript quando uma tecla é pressionada. Usado para document, Image, Link, Text, Textarea, na forma onKeyDown=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:

<script language=”javascript”>
function semArroba(e){
var carac = String.fromCharCode(e.which);
if (carac == ‘@’)
return false;
}
document.form1.nome.onkeydown = semArroba;
</script>

<form NAME=”form1″>
<INPUT TYPE=”text” VALUE=”" NAME=”nome”>
</form>

O código dado evita que o usuário insira o caractere “@” no campo “nome”.

onKeyPress
Executa um código JavaScript quando o usuário pressiona ou mantém pressionada uma tecla. Usado para document, Image, Link, Text, Textarea, na forma onKeyPress=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<script language=”javascript”>
function rolar(e){
var carac = String.fromCharCode(e.which);
if (carac == ‘c’)
self.scrollBy(0,10);
else if(carac == ‘b’)
self.scrollBy(0,-10);
else
return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = rolar;
</script>

O código dado rola a tela 10 pixels acima se o caractere “c” for pressionado e abaixo se “b” for pressionado (o evento KeyPress é repetido continuamente enquanto o usuário mantém a tecla pressionada).

onKeyUp
Executa um código JavaScript quando o usuário libera uma tecla que foi pressionada. Usado para document, Image, Link, Text, Textarea, na forma onKeyUp=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<script language=”javascript”>

function teclaLiberada(e){
var carac = String.fromCharCode(e.which);
alert(“Você liberou a tecla ” + carac);
}
document.onkeyup=teclaLiberada;
document.captureEvents(Event.KEYUP);

</script>

O código dado exibe uma mensagem com o caractere da tecla liberada.

onLoad
Executa um código JavaScript quando o navegador termina o carregamento de uma janela, de todos os quadros dentro de um FRAMESET, de uma imagem. Usado para Image, Layer, window, na forma onLoad=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Se é usado para uma imagem gif animada, é executado para cada parte da animação.
Exemplo 1:

<script language=”javascript”>

function nomeImagem(img){
alert(‘Carregada imagem ‘ + img.name);
}

</sript>
<IMG NAME=”foto” SRC=”foto.gif” ALIGN=”left” BORDER=”2″ onLoad=”nomeImagem(this)”>
O código exibe o nome da imagem exibida.

Exemplo 2:

<BODY onLoad=”window.alert(“Este é o nosso site!”)>

O código exibe uma mensagem sempre que um usuário abre a página.

onMouseDown

Executa um código JavaScript quando o usuário pressiona um botão do mouse. Usado para Button, document, Link, na forma onMouseDown=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onMouseMove
Executa um código JavaScript quando o usuário move o cursor com o mouse. Usado na forma onMouseMove=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Notar que não é associado a nenhum evento em particular por ser bastante freqüente.

onMouseOut
Executa um código JavaScript quando o usuário move o cursor de dentro para fora de uma determinada área (mapa de imagem ou link). Usado para Layer, Link, na forma onMouseOut=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onMouseOver
Executa um código JavaScript quando o usuário move o cursor de fora para dentro de uma determinada área (mapa de imagem ou link). Usado para Layer, Link, na forma onMouseOver=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<A HREF=”http://www.abc.com.br/” onMouseOver=”window.status=’Loja ABC – Tudo para seu micro’; return true”>Empresa ABC</A>

O código dado exibe a mensagem na barra de status do navegador sempre que o usuário passa o cursor sobre o link.

onMouseUp
Executa um código JavaScript quando o usuário libera um botão do mouse. Usado para Button, document, Link, na forma onMouseUp=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onMove
Executa um código JavaScript quando o usuário move uma janela. Usado para window, na forma onMove=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onReset
Executa um código JavaScript quando o usuário clica o botão Reset de um formulário. Usado para Form, na forma onReset=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

Exemplo:

<FORM NAME=”form1″ onReset=”alert(‘Considerado meio padrão de envio’)”>
Meio de envio:
<INPUT TYPE=”text” NAME=”forma” VALUE=”Via aérea” SIZE=”2″_>
<INPUT TYPE=”reset” NAME=”padrao” VALUE=”Limpar”>
</FORM>

O código dado avisa que o meio padrão será considerado se o usuário clicar no botão “Limpar” do formulário.

onResize
Executa um código JavaScript quando o usuário redimensiona uma janela ou um frame. Usado para window, na forma onResize=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

Exemplo:
<script language=”javascript”>
function abrirJanela(){
var janela;
janela=window.open(“janela.htm”,null,”width=200, height=200, resizable=yes,  menubar=no, location=no”);
janela.captureEvents(Event.RESIZE);
janela.onresize=informar;
}

function informar(){
alert(“Janela redimensionada para largura: ” + this.outerWidth + “e altura: ” +this.outerHeight);
this.focus();
}
</script>

O código dado informa a nova largura e a nova altura sempre que a janela é redimensionada.

onSelect
Executa um código JavaScript quando o usuário seleciona um texto em uma caixa. Usado para Text, Textarea, na forma onSelect=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.

onSubmit
Executa um código JavaScript quando o usuário clica o botão Submeter de um formulário. Usado para Form, na forma onSubmit=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<FORM NAME=”form1″ onSubmit=”return verificarDados(this)”>
</FORM>

No código dado, a função a ser desenvolvida, “verificarDados(a)”, deve retornar True se os dados são válidos e False caso contrário.

onUnload
Executa um código JavaScript quando o usuário sai da janela. Usado para window, na forma onUnload=”algumaCoisa”, onde “algumaCoisa” é uma função ou código de JavaScript.
Exemplo:
<BODY onUnload=”terminar()”>

No código dado, a função a ser desenvolvida, “terminar()”, deve fazer alguma ação que for necessária quando o usuário sair da janela.

  1. Nenhum trackbacks ainda.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Sair / Alterar )

Imagem do Twitter

You are commenting using your Twitter account. Sair / Alterar )

Foto do Facebook

You are commenting using your Facebook account. Sair / Alterar )

Connecting to %s

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.