Há um método que se utiliza constantemente na hora de definir eventos em Mootools. Trata-se do método bind(), que pertence a biblioteca Native - Function de Mootools.

Para os que chegarem a este artigo do Manual de Mootools de CriarWeb.com, devem ler antes o artigo anterior, no qual dá uma primeira introdução aos eventos de Element.

Para que serve Bind() em funções Mootools

Bind() é um método de funções Mootools que permite mudar o âmbito da variável this quando se invoca uma função. Como sabemos 'this' é um variável que aponta ao objeto que recebe uma chamada a um método. Dito de outra maneira, this é uma referência ao objeto sobre o qual está se executando um método.

Os que dominem, mesmo que seja ligeiramente, a programação orientada a objetos devem bem saber que a variável this é muito importante, porque nos permite fazer coisas com o objeto com o qual se trabalha. Sendo assim, quando chamamos a um evento que estamos definindo em um objeto, se invoca a uma função distinta, onde o âmbito da variável this já não existe. Portanto, em um evento não teríamos acesso à variável this, com o qual não poderíamos acessar ao objeto que recebeu o evento.

Com bind() em uma função podemos definir o valor da variável this dentro dessa função. Tal valor, que há que carregar em this durante a execução da função, se deve escrever na própria declaração da função.

function minhafuncion(){
   //... codigo da funcao
   this.loquesea() //this toma o valor da variavel conteudo_para_this
}.bind(conteudo_para_this)

Así, quando se execute essa função, a variável conteudo_para_this se poderá acessar através da variavel this.

Definição de um evento com bind

Agora, com respeito aos eventos, como dizia anteriormente neste texto publicado em criarweb.com, ao se codificar em uma função distinta, há vezes que teremos que utilizar bind(), para dizer à função do evento o valor da variável this que deve ter.

Certamente, poderemos ver melhor com um exemplo. Temos este link:

<a href="javascript:void(0)" id="meulink">Link</a>)

Agora vamos definir um evento sobre o link, que se execute quando o usuário coloca o mouse sobre o mesmo.

$("meulink").addEvent('mouseover', function() {
   this.set("style", "background-color: #ff8800;");
}.bind($("meulink"))
);

Como se pode ver, na hora de declarar a função, depois do fechamento, se colocou o método bind() passando como parâmetro uma variável, $(" meulink"), que é uma referência ao link que recebe este evento.

Logo, no código da função, se pode apreciar como se utiliza a variável this, que tem o valor do que se passou em bind(), ou seja, o link sobre o qual se executou o evento. A esse link se muda uma declaração de estilo css para colocar uma cor de fundo.

Agora veremos um evento similar, para executar ações quando se retira o mouse do link:

$("meulink").addEvent('mouseout', function() {
   this.set("style", "background-color: transparent;");
}.bind($("meulink"))
);

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

Finalmente, aprendemos a utilizar a função bind() na hora de definir eventos, para que as funções que codificam os eventos saibam o que se deve ter na variável this. Realmente o exemplo que colocamos não diz muito sobre a verdadeira importância de bind(), porém ao longo do manual de Mootools de criarweb.com veremos mais exemplos sobre bind() muito mais úteis e fundamentais, com o qual se poderá praticar sobre este assunto.