En la entrada anterior mencioné (y utilizé) una función para asociar eventos a objetos de JavaScript que saqué del common.js de Dustin Diaz. Hoy voy a explicar como funciona, en mayor profundidad.
Primero veamos el código completo de esta función:
/* addEvent: simplified event attachment */
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() {
obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
La función recibe tres parametros:
- obj: objeto al que le queremos asociar la función para un evento
- type: tipo de evento al que asociamos la funcion
- fn: función que se asocia al objeto para que se dispara en determinado evento
En resumen, lo que hace esta función es asociar para el objeto
obj en el evento on
type la función
fn.
Podemos notar que la función addEvent internamente utiliza un objeto EventCache, que se encarga de "apilar" y "desapilar" los eventos ligados a los objetos. Viendo el codigo completo en el common.js podemos ver lo que hace a pleno detalle. También hacer notar que mediante un método de EventCache se desligan los eventos que tuviesemos añadidos cuando se destruye el objeto
window.
En la últimas entradas hemos hecho incapié en el operador
this. En este caso, por estar trabajando con eventos, quiero recordar que
this invocado desde la función de respuesta al evento, hace referencia al objeto que ha disparado el evento. De esta forma podremos tener acceso al objeto, para modificarlo según convenga.
En la siguiente entrada, trataré de profundizar en
this cuando se invoca desde funciones disparadas por eventos. Se puede llegar a cambiar el objeto al que apunta
this para este tipo de funciones.
