Utilización de bind() en los eventos Mootools

Hay un metodo que se utiliza constantemente a la hora de definir eventos en Mootools. Se trata del método bind(), que pertenece a la librería Native - Function de Mootools.

Para los que lleguen a este artículo del Manual de Mootools de DesarrolloWeb.com, decirles que deben leer antes el artículo anterior, en el que da una primera introducción a los eventos de Element.

Para qué sirve Bind() en funciones Mootools

Bind() es un método de funciones Mootools que permite cambiar el ámbito de la variable this cuando se invoca una función. Como sabemos 'this' es una variable que apunta al objeto que recibe una llamada a un método. Dicho de otra manera, this es una referencia al objeto sobre el que se está ejecutando un método.

Los que dominen, aunque sea ligeramente, la programación orientada a objetos bien deben saber que la variable this es muy importante, porque nos permite hacer cosas con el objeto con el que se trabaja. Ahora bien, cuando llamamos a un evento que estamos definiendo en un objeto, se invoca a una función distinta, donde el ámbito de la variable this ya no existe. Así que en un evento no tendríamos acceso a la variable this, con lo que no podríamos acceder al objeto que ha recibido el evento.

Con bind() en una función podemos definir el valor de la variable this dentro de esa función. Dicho valor, que se ha de cargar en this durante la ejecución de la función, se debe escribir en la propia declaración de la función.

function mifuncion(){
   //... codigo de la funcion
   this.loquesea() //this toma el valor de la variable contenido_para_this
}.bind(contenido_para_this)

Así, cuando se ejecute esa función, la variable contenido_para_this se podrá acceder a través de la variable this.

Definición de un evento con bind

Ahora, por lo que respecta a eventos, como decía anteriormente en este texto publicado en desarrollo web .com, al codificarse en una función distinta, hay veces que tendremos que utilizar bind(), para decirle a la función del evento el valor de la variable this que debe tener.

Seguramente lo podamos ver mejor con un ejemplo. Tenemos este enlace:

<a href="javascript:void(0)" id="mienlace">Enlace</a>)

Ahora vamos a definir un evento sobre el enlace, que se ejecute cuando el usuario coloca el ratón sobre el mismo.

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

Como se puede ver, a la hora de declarar la función, después de la llave de cierre, se ha colocado el método bind() pasando como parámetro una variable, $("mienlace"), que es una referencia al enlace que recibe este evento.

Luego, en el código de la función, se puede apreciar cómo se utiliza la variable this, que tiene el valor de lo que se pasó en bind(), es decir, el enlace sobre el que se ejecutó el evento. A ese enlace se le cambia una declaración de estilo css para ponerle un color de fondo.

Ahora vamos a ver un evento similar, para ejecutar acciones cuando se retira el ratón del enlace:

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

Este ejemplo se puede ver en marcha en una página aparte.

Así pues, hemos aprendido a utilizar la función bind() a la hora de definir eventos, para que las funciones que codifican los eventos sepan qué se debe tener en la variable this. Realmente el ejemplo que hemos puesto no dice mucho sobre la verdadera importancia de bind(), pero a lo largo del manual de Mootools de desarrolloweb.com veremos más ejemplos sobre bind() mucho más utiles y fundamentales, con lo que se podrá practicar sobre este asunto.