Em nosso Manual de Mootools já explicamos algumas das chaves do trabalho com eventos. Porém, ainda há alguns detaçhes que se devem comentar e mostrar exemplos de código para dominar o sistema de eventos.

Em geral, já vimos como associar um evento a um elemento da página e também como utilizar o método bind() para conseguir mudar o âmbito da variável this quando se está codificando o comportamento de um evento. Agora veremos como podemos disparar um evento de um elemento da página, automaticamente, sem necessidade que o usuário produza o evento.

Método fireEvent de Element.Event

O método fireEvent() serve para executar um evento de um elemento, ou seja, lançar um evento que pertence a um elemento da página, sem que o usuário tenha tido que realizar nada com esse elemento.

Este método se invoca sobre o elemento da página do que se quer executar o evento (um botão ou elemento de formulário, um link, uma camada DIV ou o que for) e recebe vários parâmetros.

• Tipo de evento: o nome do evento que se deseja lançar.
• Parâmetros para o evento: um ou vários parâmetros que se têm que passar à função que executa o evento. Se for mais de um parâmetro, se têm que indicar em um array.
• Retardo: número de milésimos de segundos que se tem que executar o evento.

Aqui temos o primeiro exemplo deste artigo de CriarWeb.com dos dois que veremos sobre o método fireEvent, no qual teremos um botão HTML. Logo, criaremos um evento "click" para esse botão e o invocaremos com fireEvent.

Este seria o botão:

<input type="button" value="clicar" id="meubotao">

Agora vejamos o código Javascript com Mootools para criar o evento click e lançá-lo com fireEvent:

window.addEvent("domready", function(){
   $("meubotao").addEvent("click", function(){
      alert("Evento click no botão");
   });
   
   $("meubotao").fireEvent("click");
   
});

Teríamos que ver se estamos obrigados a utilizar addEvent do evento domready, para nos assegurarmos que este código se executa quando o DOM estiver pronto.

Logo, se pode ver que com addEvent do evento click sobre o objeto $("meubotão") (o elemento HTML botão, que tinha o id="meubotao") geramos o correspondente evento para quando se clique no botão.

Logo, com $("meubotao").fireEvent("click"); lançamos o evento "click", que será como se o usuário tivesse clicado sobre o botão.

Podemos ver o exemplo em funcionamento em uma página à parte.

Importante sobre fireEvent

O método fireEvent serve para executar qualquer tipo de evento dos que se podem escrever com os manejadores de eventos normais de Javascript: onclick, onload... Porém, só poderemos lançar eventos que tenham sido criados ou declarados a partir do método addEvent de Mootools e não eventos que tenham sido declarado escrevendo-os com o correspondente atributo HTML de evento (onclick, onmousedown, etc.) na própria etiqueta do elemento .

Cabe dizer ademais sobre fireEvent que se pode executar sobre os objetos window e document, com o que se podem lançar eventos sobre a janela do navegador ou sobre o objeto documento, como se o usuário tivesse-os produzido. Com a exceção do evento "domready", que realmente só se executa quando o DOM está pronto.

Segundo exemplo de fireEvent

Vejamos um segundo exemplo, para acabar de mostrar as possibilidades dos eventos em Mootools que podemos colocar em funcionamento com fireEvent. Neste exemplo, queremos mostrar a utilização de outros parâmetros de fireEvent, ao mesmo tempo que abrimos as portas à criação de eventos personalizados em nossas aplicações Javascript.

Como dissemos antes, podem se indicar outros atributos a fireEvent, um é um parâmetro que se passa à função que se encarrega de processar o evento e o outro um retardo para a execução do evento.

Ademais, neste segundo exemplo vamos criar um método personalizado, que não tem nada a ver com qualquer evento dos que existem em Javascript. Criamos o evento personalizado só por fazer uma prova e chamamos "criarweb".

Temos um elemento da página, neste caso um link:

<a href="http://www.criarweb.com" id="meulink">Voltar a CriarWeb.com</a>

E agora um código Mootools para criar o evento personalizado "criarweb", que criamos como se fosse um dos eventos normais de Javascript:

$("meulink").addEvent("criarweb", function(algo){
   alert("Este evento eu inventei\n" + algo);
});

Vemos agora que a função que processa o evento tem um parâmetro chamado "algo" que se mostra na caixa de alerta.

Agora podemos executar este evento com fireEvent(), desta maneira:

$("meulink").fireEvent("criarweb", "parâmetro que passo à função",1000);

Como se pode ver, se executa o evento personalizado "criarweb", se passa um parâmetro com uma cadeia de texto e se faz um retardo de 1 segundo (1000 milésimos de segundos).

O exemplo se pode ver em funcionamento em uma página à parte.

Como se pode ver, com Mootools é fácil codificar eventos e lançá-los (colocá-los em funcionamento) desde o próprio código javascript, como se tivesse sido o próprio usuário o que tivesse produzido o evento com suas ações sobre os elementos da página.