sábado, 20 de agosto de 2011

Eventos javascript direto no código javascript

Um breve exemplo de código, de como fiz para não ter que colocar o nome do evento dentro das tags html
O exemplo é autoexplicativo
Quando a página é carregada é disparado o evendo onload
onde na linha window.onload eu pego todos os eventos que desejo
Os eventos ficarão ali dentro daquela função/classe javascript
Quando o botão btn1 (sei por causa do id dele, que decidi chamá-lo pelo mesmo nome)
for clicado (evento onclick ) eu executo uma função que chama a função merda(),
que mostra em um alert os 3 valores dos campos
Fiz também com os outros eventos do teclado
Bem coloquei aqui, mais para saber, como se faz isso ...


< html>
< script type="text/javascript">

function merda(){

alert("ihull eventos direto do js"+"\n---\n"+id('inputName').value+" "+"\n "+id('inputSenha').value+"\n "+id('btn1').value);
}

/* perceba que no carregamento da página já coloco o onload que corresponde ao evento onload da página */
window.onload = function(){
/* aplicando funções no click do botão btn1 */
id('btn1').onclick = function(){
merda();
/* quando clicar no botão btn1 chamará a função merda*/
}
id('inputSenha').onkeypress= function(){
alert("Senha = \""+id('inputSenha').value+"\"");
/* quando o usuário pressionar a tecla (teclar) exibirá o alert do que ele digitou */
}
id('inputName').onkeydown= function(){
alert("Nome= \""+id('inputName').value+"\"");
/* quando o usuário pressionar a tecla (teclar) exibirá o alert do que ele digitou */
}

}
function id( el ){
return document.getElementById( el );
}

< /script>
< body>
< h4> Exemplo idiota manipulação de evento js< /h4>
< p>
< p> Nome:< /p>
< input type="text" name="inputName" id="inputName" size="20">
< p> Senha:< /p>
< input type="password" name="inputSenha" id="inputSenha" size="20">
< input type="button" name="btn1" id="btn1" value="BTN" >
< /p>
< /body>
< /html>

Nenhum comentário: