Asociación de eventos

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 ontype 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.