…..
Utilizando eventos sem declarar no HTML
Olá, nesse minúsculo tutorial irei mostrar como utilizar eventos javascript sem ter que declara-los no html, ou seja, vamos usar os eventos deixando o html 100% limpo, sem aqueles onclick, onmouseover…e por ai vai.
Vamos começar pelo html
<html>
<head>
<title>Eventos</title>
<script src=”eventos.js” type=”text/javascript”></script>
</head>
<body>
<ul>
<form name=”contato” id=”contato”>
<input type=”button” name=”btn_1″ id=”btn_1″ value=”btn1″ />
<input type=”button” name=”btn_2″ id=”btn_2″ value=”btn2″ />
</form>
</ul>
</body>
</html>
bem isso foi o mais puro que consegui para uma página html, notem que não há eventos nos botões.
Vamos ao Javascript, salve-o como eventos.js
function CarregaEventos()
{
//vamos atribuir as propriedades dos botoes as variaveis obj1 e obj2
obj1 = document.getElementById(“btn_1″)
obj2 = document.getElementById(“btn_2″)
//aqui declaramos o evento onclick para o botao 1
obj1.onclick = function(){
alert(‘diga oi’)
}
//aqui declaramos o evento onclick para o botao 2
obj2.onclick = function(){
alert(‘diga tchau para os btns’)
// mudamos as propriedades dos botoes p/ nao aparecam
obj1.style.display = ‘none’
obj2.style.display = ‘none’
}
}
//funcao que carrega/prepara os eventos para os botoes
window.onload = function()
{
// apos o carregamento de toda a pagina a funcao é chamada
// e ira aguardar pelas acoes do usuario
CarregaEventos()
}
A função window.onload é equivalente a <body onload=”funcao()”> , mas nesse caso acabaria fugindo de nosso propósito. Repare que após atribuir as propriedades dos botões para as variáveis nós passamos a ter acesso aos seus métodos, ou seja, onde obj1.onclick realiza a chamada ao metodo onclick do botão, poderiamos usar qualquer outro evento javascript cabíveis aos botões, por ex: obj1.onMouseOver, obj1.onMouseDown ….and more….
É isso, algo simples, agora fica a cargo de vocês usarem a criatividade para utilizar da melhor maneira essa pequena solução, que para mim é muito útil, principalmente na hora de fazer a manutenção, dessa forma nós alteramos somente o javascript e o html continua intacto e limpo.
Sem comentários ainda até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
