![HectorBenitez.com [Blog] - Desarrollo de sistemas o algo por el estilo…](http://blog.hectorbenitez.com/wp-content/themes/nightsky-10/images/header.gif)
JQuery: Manejadores de eventos y callbacks en OOP
Dos cosas basicas al momento de programar con JQuery son el usar diversos manejadores de eventos (event handler) y llamar funciones en repuesta a algo, los llamados callback, muchos son los usos que tenemos para estas 2 cosas, desde controlar clicks hasta realizar acciones en respuesta a un llamado ajax, esto es algo muy comun en JQuery, sin embargo, cuando estamos programando con objetos, debemos tener en cuenta como funciona el contexto dentro de JQuery.
Por ejemplo aqui tenemos un manejador de eventos muy simple:
google.load("jquery", "1"); function OnLoad(){ $('#content').html('Click aqui'); $('#content').click(function() { alert('Manejador del evento .click()'); }); } google.setOnLoadCallback(OnLoad);
Muy bien, este ejemplo fue muy sencillo y funciona en caso de que queramos usar funciones para manejar eventos, ahora, si en lugar de funciones quisieramos usar metodos de un objeto, probablemente intentariamos usar algo como esto:
google.load("jquery", "1");
function OnLoad(){
$('#content').html('Hola mundo');
c = new Class1();
$('#content').click(c.hi);
}
Class1 = function(){
this.text = "Hola";
this.hi = function() {
alert(this.text);
};
}
google.setOnLoadCallback(OnLoad);
Desafortunadamente este codigo no dara el resultado esperado, simplemente al dar click arrojara un alert que dice “undefined” y no el valor “Hola” que esperabamos, esto sucede debido a que el manejador de evento esta ligado al metodo de la clase en si y no al metodo de la instancia que creamos para este proposito, es decir, al activar el manejador del evento, el contexto ya no es el esperado…
Afortunadamente JQuery 1.4 ya tiene una solucion para este problema y es el uso de la funcion jQuery.proxy (ó $.proxy) la cual nos permite corregir esta perdida de contexto, uno de los usos de esta funcion consiste en enviar en el primer parametro el metodo que queremos disparar y en el segundo el objeto que sera utilisado como “this” cuando el metodo manejador sea disparado.
Este ejemplo debe funcionar correctamente:
google.load("jquery", "1");
function OnLoad(){
$('#content').html('Hola mundo');
c = new Class1();
$('#content').click($.proxy(c.hi, c));
}
Class1 = function(){
this.text = "Hola";
this.hi = function() {
alert(this.text);
};
}
google.setOnLoadCallback(OnLoad);
Esto funciona tanto para manejadores de eventos, como para callbacks, los ejemplos que tenemos aqui pueden ser probados en Google Code Playground, espero sea de ayuda… saludos
