Os eventos são uma das partes fundamentais de Mootools que devemos dominar para poder fazer componentes dinâmicos com Javascript, que respondam às ações realizadas pelos usuários. No Manual de Mootools publicado em CriarWeb.com já vimos em alguns exemplos como se realizam eventos, porém ainda não oferecemos explicações detalhadas sobre como criá-los. Chegou o momento de conhecer os eventos, para criá-los e começar a fazer scripts mais interativos.

Sendo assim, vamos trabalhar com a classe Element de Mootools, para aprender a criar eventos que respondam a ações do usuário realizadas sobre qualquer elemento da página.

Para isso, os elementos da página, que se modelam através da classe Element, têm um método chamado addEvent(), que recebe o tipo de evento e a função que deve se executar como resposta ao mesmo. Veremos isso detalhadamente neste artigo.

Definir um evento sobre um elemento da página

Supomos que temos um elemento qualquer da página, ao que queremos atribuir um evento.

<div id="meuelemento">Este elemento</div>

Agora, com Javascript podemos definir o seguinte código para atribuir um evento a este elemento:

$("meuelemento").addEvent('click', function() {
   alert('Clicou "meuelemento"...');
});

Como se pode ver, se acessa ao elemento através da função dólar ($). Logo sobre esse elemento se invoca o método addEvent, ao que lhe passamos dois parâmetros.

'click': é o tipo de evento que queremos definir (onclick, onmouseover... ) porém sem o prefixo "on". Sendo assim, clique serve para definir um evento que se desata quando se clica sobre o elemento.

function(): Logo se define a função que se deve invocar para realizar a execução de ações relacionadas com o funcionamento do evento. Esta série de funções se podem definir a seguir no mesmo código, abrindo as chaves da função e logo colocando todas as sentenças a executar quando se execute o evento.

Podemos ver o exemplo em funcionamento em uma página onde temos todos os exemplos sobre eventos que vamos ver neste artigo.

window.addEvent('domready', function() {
      $("meuelemento").addEvent('click', function() {
         alert('Clicou "meuelemento"...');
      });
});

Outro exemplo de criação de eventos em Mootools

Para que se possa entender melhor este sistema para a definição de eventos de usuário em Mootools, vamos colocar outro código para a execução de outro evento sobre outro tipo de elemento da página. Neste caso vamos definir um evento "onchange" sobre um campo select de formulário. O evento onchange se desata quando muda o valor selecionado no campo do menu select.

Temos este campo select de formulário:

<form>
<select id="meuselect">
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
</select>
</form>

Como se pode ver, colocamos um identificador na etiqueta SELECT, para poder nos referirmos a ele mediante Mootools. Agora vejamos como definir um evento sobre este campo.

$("meuselect").addEvent('change', function() {
   alert('Mudou o campo select');
});

O exemplo é similar, com a diferença que neste caso utilizamos o evento "change" que corresponde ao mencionado evento de Javascript onchange.

Podemos ver este código funcionando neste link.

Já pudemos começar a criar eventos com Mootools, com addEvent(), agora vamos passar a utilizar uma função realmente útil em Mootools, bind(), porém explicaremos no próximo artigo.