Controladores de Eventos em Java Script


Dando seguinte a reprodução de posts do site MSPC – Informações Técnicas, reproduzo o post que trata de Controladores de Eventos. Recomendo a visita ao site.

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 ABC</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.

fonte: http://www.mspc.eng.br/info/jscriptContrEv.shtml

Sobre Mastigado
Sou um daqueles que precisa mudar o mundo.

Deixe uma resposta

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

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: