Uma necessidade muito comum na programação orientada a objetos é o disparo de trechos de código quando determinado evento acontece.
Usamos isso no dia-a-dia sem pensar muito, tomando como exemplo o evento onClick dos botões ou o evento onLoad da página.
Mas e quando criamos nossos próprios objetos javascript como adicionamos eventos a eles? Bom, existem várias maneiras e nesse post vou mostrar uma forma muito fácil que utiliza a bilbioteca YUI da Yahoo.
Primeiramente vamos criar o nosso objeto em um arquivo a parte chamado MeuObjeto.js:
function MeuObjeto(){
this.OnFinish = new YAHOO.util.CustomEvent('Terminou');
this.Start = start;
}
function start(){
this.onFinish.fire();
}
Perceba que estou referenciando uma classe da Yahoo. Essa classe está em um js que iremos incluir na página que utilizará o nosso objeto.
A function MeuObjeto() cria uma nova classe chamada MeuObjeto.
this.OnFinish declara um novo evento para esse objeto.
this.Start cria um novo método para nosso objeto. Quanto esse método é invocado chama a function start.
A function start() chama o método fire de nosso evento onFinish. Esse método fire (da YUI) manda uma mensagem para todos os métodos que estão assinando o nosso evento.
Claro que aqui temos um exemplo muito simples, mas você pode usar isso nas mais variadas situações. Por exemplo, imagine que você crie um objeto que monta um controle visual que permite alterar um valor através de um botão que pode ser movido para os lados (também conhecido como slider). Você pode criar três eventos para essa situação: um para quando o usuário começar a arrastar o botão, outro que é disparado enquanto o botão está sendo movido e um para quando o usuário parou de arrastar o botão, algo como:
function start(){
this.onStartMove.fire();
}
function move(){
this.onMove.fire();
}
function end(){
this.onFinishMove.fire();
}
Perceba que é você, dentro do objeto, que está dizendo “olhem, assinantes, aconteceu alguma coisa”.
(Você pode ver um outro exemplo de evento nessa página. Perceba que os dois quadrados trocam de cor quando você pára de move-los. )
E como vamos usar isso? Para exemplificar, vou criar uma página HTML bem simples:
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5: <title>Teste Eventos JavaScript</title>
6: <script type="text/javascript"
src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js" ></script>
7: <script type="text/javascript"
src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js" ></script>
8: <script src="scripts/MeuObjeto.js" type="text/javascript"></script>
9: <script language=JavaScript>
10: function MostraAlerta(){
11: alert('terminou!!!')
12: }
13:
14: var minhaInstancia = new MeuObjeto();
15: minhaInstancia.OnFinish.subscribe(MostraAlerta);
16: minhaInstancia.Start();
17:
18: </script>
19: </head>
20: <body>
21:
22: </body>
23: </html>
Nas linhas 6 e 7 estou chamando os javascripts direto do site do Yahoo. São necessários dois javascripts: o básico e o relativo aos eventos. Você também pode descarregar os javascripts e colocá-los em seu site.
Na linha 8 estou chamando o javascript com meu objeto.
As linhas 10 a 12 criam um evento que chamarei quanto o evento for disparado.
A linha 14 cria uma nova instância do meu objeto.
A linha 15 “assina” o evento. Ou seja, sempre que o evento OnFinish for disparado, a function MostraAlerta é chamada.
A linha 16 chamada o método Start() que simula o disparo de um evento.
Quando você chama Start(), o objeto invoca a função start() que dispara (fire) o evento onFinish(). Com isso todos os assinantes são notificados. No nosso caso temos apenas um assinante, a objeto minhaInstancia. Nessa assinatura específica dissemos que queremos que o método MostraAlerta() seja chamado.