Adicionando funções em eventos de elementos via Javascript, com e sem Mootools

As vezes precisamos adicionar um evento a um elemento da página depois que ele já foi criado.

Fazer isso com o javascript é muito simples e existem muitas maneiras.

Se você deseja apenas inserir um evento em um elemento html basta fazer o seguinte código:


elemento.onclick = function(){
//aqui você coloca o que a função vai fazer
};
Mas se você deseja adicionar mais de um evento por vez pode fazer usar o addEventListener.

elemento.addEventListener(evento, função, capturar);



Infelizmente ainda vivemos na era dos conflitos de navegadores.... O método addEventListener não é reconhecido por todos os navegadores. Para o IE, o método esperado seria attachEvent. Outra observação importante é, o IE não contém o parâmetro capturar, ele já é definido como true.

Então se quisermos adicionar mais de uma função em um evento de um elemento faremos assim:


if(window.addEventListener){
    elemento.addEventListener("click", function() { //o que vc desejar }, false);
} else
if(window.attachEvent)
{
    elemento.attachEvent("click", function() { //o que vc desejar });
}
Obs: troque o "click" , pelo evento que você quiser.

É importante lembrar que cada vez que o código acima for executado vai adicionar a função  ao evento do elemento, ou seja se você adicionar três vezes, quando clicar no elemento ele vai executar a função 3 vezes seguidas. Diferente do primeiro exemplo.

E como fazer isso no mootools ?
Como o mootools é um framework cross-browser, ou seja, seus códigos (em tese) devem funcionar em qualquer navegador, existe apenas uma função para adicionar eventos, o AddEvent (ou AddEvents se você deseja adicionar vários de uma só vez).

Funciona da seguinte forma:

 elemento.addEvent(tipo, função);
Já o addEvents, recebe um JSON como parâmetro para adicionar os eventos:

elemento.addEvents({
    'mouseover': function(){
        alert('mouseover');
    },
    'click': function(){
        alert('click');
    }
});


Para mais detalhes visite a página da documentação do mootools sobre eventos em elementos.
http://mootools.net/docs/core/Element/Element.Event

Caso deseje testar execute o código abaixo em um console javascript e clique na imagem depois.

if(window.addEventListener)
{
  document.getElementById('rocker').addEventListener("click", function() { alert("ehhh."); }, false);
} else
if(window.attachEvent)
{
    document.getElementById('rocker').attachEvent("click", function() { alert("ehhh."); });
}