funcion con parametros para AddEventListener()

Queremos definir una función con parametros y asignarla a un evento javascript de un elemento.

El primer problema que encontramos es como lo definimos? Que dice el estandard? tenemos varios modos de hacerlo:

  1. Mediante AddEventListener para navegadores estandard  o con  attachEvent  para explorer
  2. Podremos definir todo el tag mediante innerHTML incrustando ahí la función javascript con tantos parametros como queramos.
  3. podemos igualar el elemento + punto + evento (elemento.onclick='Enviar('+variableGlobal+')');

El estandard dice de usar la primera opción. Pero claro no todos los navegadores son estadards. de todos modos tenemos el problema siguiente, asignar una funcion no da ningun tipo de problema, pero como hacemos cuando queremos declarar una funcion con 1 parametros?

enlace.addEventListener("click", function(){ MyFuncion(parametro1,parametro2);} , false);

Esto funciona bien, pero teniendo en cuenta que parametro1 y parametro2 deberán ser variables globales. Así que si estamos recorriendo un bucle y estas variables son locales, estos parametros solo conservarán el ultimo valor y no los valores del bucle...

Como nos podemos pasar una variable local?  Una solucion un tanto graciosa, es guardarnos el valor en alguna propiedad del elemento que va a recibir el evento. Que quiere decir esto? Pues por ejemplo si este evento se va a asocioar a un link (elemento a) podemos utilizar por ejemplo su atributo id, name, etc... alguno que estemos utilizando. Etonces ahi guardamos el valor que queramos. Al declar

enlace.name=mivariableLocal;

enlace.addEventListener("click", function(event){ Envio(event.target.getAttribute('name');} , false);

Ahora estamos guardando el valor de la variable en un atributo del enlace, asi, cuando declaramos la funcion, le pasamos el evento y desde el evento nos es facil recuperar ese elemento y consultar la propiedad donde previamente nos hemos guardado el valor necesairo para pasarle a la función.

Que pasa si me quiero pasar 2 o más parámetros a un función. Bueno, podriamos crear un Array global donde en cada posición del array pusieramos los parametros necesarios para la funcion. y el indice de la matriz lo guardamos en alguna propiedad. Y a la función pasandolo ese parametros accedemos al Array global a consultar los parametros que queriamos pasarle.

Evidentemente existen otras maneras, podeis buscar por los "callBacks" una solucion  donde se crea un handler capaz de pasar parametros al addeventListener.

Para solucionar la imcompatibilidad en ente navegadores dejo aqui una funcion para añadir eventos:

JAVASCRIPT:
  1. function AnadirEvento(evento, funcion, elemento) {
  2.  
  3. if (elemento.addEventListener)  // standard W3C DOM
  4. return elemento.addEventListener(evento,funcion,false);
  5. else if (elemento.attachEvent) { // IE cabron DOM
  6. return elemento.attachEvent("on"+evento, funcion);
  7. }else{ // resto navegadores
  8. try{
  9. elemento["on"+evento] = funcion;
  10. }
  11. catch(e){throw 'No es posible añadir evento';}
  12. }
  13. }

Etiquetas: , , ,

Un comentario para “funcion con parametros para AddEventListener()”

  1. Jose dice:

    Estoy empezando con Javascript y llevaba un día entero atascado justo con esto sin saber cómo apsar variables locales a la función del addEventListener, hasta que he dado con tu articulo.

    Me has alegrado el dia y la semana, ¡muchas gracias!

    Un saludo

Deja un comentario

CAPTCHA Image Audio Version
Reload Image