IMPORTANTE! Eventos Dinámicos en Javascript

[el_javi]

Buenas noches.

Pongo este post en el foro para ver si alguien me puede ayudar con un tema que me trae loco desde hace ya 3 días.

Estoy creando eventos de forma dinámica, y me encuentro con un problema...

Cuando necesito que mi funciòn asignada al evento, use unos parámetros de entrada (ejemplo)
objeto.onclick = mi_funcion(param1,param2);

En el caso del ejemplo anterior, no funciona, dado que al encontrarse los paréntesis, ejecuta directamente la función.

Si alguien puede ayudarme, se lo agradecería.

Muchas gracias de antemano.

Javi

[flaviovich]

Hola y bienvenido!
Me parece que tienes que retornar el vento:

Código:

function mi_funcion(param1,param2)
{
  return event;
}

Aunque puedo equivocarme
Si no es la solucion, ya pensaremos en otra

[tunait]

Pídeselo así

Código:

objeto.onclick = function(){
     mi_funcion(param1,param2);
}

[el_javi]

Gracias por contestar tan pronto tunait y flaviovich.

Os doy mas detalles de mi problema:

Los eventos los estoy agregando en tiempo de ejecíón (dinamicamente), de la siguiente manera:
if (window.addEventListener) // Si El navegador tiene un EventListener (Firefox y Netscape)
{
el_objeto.addEventListener(el_evento,eval(la_funci on),true);
}
else // Si no es Netscape ni Firefox
{
// Si el navegador es IE 5+
if (window.attachEvent)
{
var cadena_evento = "on" + el_evento;
el_objeto.attachEvent(cadena_evento,eval(la_funcio n));
}
else // Si no es IE 5+
{
if (document.getElementById)
{
el_objeto.onmouseout = eval(la_funcion);
}
}
}

Entonces, dentro del attachEvent no puedo poner un function(){
mi_funcion(param1,param2);
}

Si podeis ayudarme con alguna información más os lo agradecería.

Muchas gracias

[tunait]

Pero ¿por qué estás usando el eval? qué tipo de argumentos le estás pasando?

[el_javi]

Tienes toda la razon, el eval, sobra (esque se me quedó de unas pruebas q estaba haciendo)

No se si me e explicado bien o no respecto a lo que quiero (y necesito) hacer....

Muchas gracias a los q respondeis.

[tunait]

Pero igual te hago la misma pregunta ¿qué tipo de argumentos se han de pasar?

[el_javi]

Ante todo gracias por tu dedicación Tunait.

Te comento qué es lo que quiero hacer.

Mi intención es asignar eventos dinamicamente.
Entonces, tengo un ENLACE
<a href"#" onclick="abrir_buscador(event)">Buscar</a>[/INDENT[/INDENT]
y mi función "abrir_buscador" expande una tabla oculta en la página, y ademas dinamicamente, quiero ponerle al enlace del que viene este evento, que en su onclick, tenga una función diferente (cerrar_buscador())
El código de mi función abrir_buscador es el siguiente

function abrir_buscador_inicial(evt)
{

var objeto_buscador;

// Capturamos el Evento

var e = (window.event) ? window.event : evt;

// Definimos que Objeto produjo el Evento

objeto_buscador = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);

// Abro el Buscador

document.getElementById("tabla_buscador").style.di splay = "inline";

// Asigno al objeto de ABRIR y CERAR el buscador, el evento correspondiente (En este caso cerrar)

objeto_buscador = agregar_evento_dinamico(objeto_buscador,"onclick", "cerrar_buscador(objeto_buscador)")

}

Mi intención es en lo remarcado (al asignar el evento de forma dinámica) agregar_evento_dinamico(objeto_buscador,"onclick", "cerrar_buscador"), poder pasarle uno o varios parámetros a la función

Mi función que cierra el buscador es la sigueinte
function cerrar_buscador(el_objeto)
{

// Asigno al objeto de ABRIR y CERAR el buscador, el evento correspondiente (En este caso cerrar)

el_objeto = agregar_evento_dinamico

(el_objeto,"onclick","abrir_buscador(el_objeto)")

// Cierro el Buscador

document.getElementById("tabla_buscador").style.di splay = "none";

}

Mi función que agrega eventos dinamicamente es la siguiente

function agregar_evento_dinamico (el_objeto, el_evento, la_funcion)
{

if(el_evento.substr(0,2).toLowerCase() == "on")

{

el_evento = el_evento.substr(2,el_evento.length)

}

// Agregamos en tiempo de Ejecución el evento MouseOut del Boton

if (window.addEventListener) // Si El navegador tiene un EventListener (Firefox y Netscape)

{

el_objeto.addEventListener(el_evento,la_funcion,tr ue);

}

else // Si no es Netscape ni Firefox

{

// Si el navegador es IE 5+

if (window.attachEvent)

{

var cadena_evento = "on" + el_evento;

el_objeto.attachEvent(cadena_evento,la_funcion);

}

else // Si no es IE 5+

{

if (document.getElementById)

{

el_objeto.onmouseout = la_funcion;

}

}

}

return(el_objeto);

}

Espero no haberos liado, y que podais echarme una mano.

Muchas gracias

[tunait]

Me despista un poco que comentas que ...

quiero ponerle al enlace del que viene este evento, que en su onclick, tenga una función diferente (cerrar_buscador())

...sin embargo luego en el código veo que estás queriendo asignar un onmouseover

Igual, tal vez no acabo de entenderlo pero si lo que quieres es que un link tenga asignado en el evento onclick una acción y tras activar esa acción que su evento onclick cambie a otra acción por qué no haces algo así....

Código:

<script type="text/javascript">
function abrir(obj){
	alert('abro')
	obj.onclick= function(){
		cerrar(this)
	}
}
function cerrar(obj){
	alert('cierro')
	obj.onclick=function(){
		abrir(this)
	}
}
</script>
</head>

<body>
<a href="#" onclick="abrir(this)">click</a>
</body>

[el_javi]

La solución que comentas es buena, pero tiene un problema para mi implementación...

<script type="text/javascript">
function abrir(obj){
alert('abro')
obj.onclick= function(){
cerrar(this)
}}
function cerrar(obj){
alert('cierro')
obj.onclick=function(){
abrir(this)
}}
</script>

Lo remarcado en negro, es mi problema.

Teniendo en cuenta la función que puse en el post de antes (la de asignar eventos de forma dinamica).... no puedo asignar en el attachEvent la función que tu me comentas... (ejemplo)

Yo quiero esto

el_objeto.attachEvent(cadena_evento,la_funcion(el_ objeto);

Con lo que tu me dices, tendría que ser algo asi como...

el_objeto.attachEvent(cadena_evento,function(){
abrir(el_objeto));

Y esto, segun creo no es posible...

Gracias por air ayudandome, ademas, veo que nos vamos acercando.

Un saludo.

[tunait]

Ya, pero es que usando este sistema no necesitas usar el attachEvent()

Es decir, te estoy sugiriendo usar esta forma en lugar de usar el attachEvent

[kepawe]

Hola el_javi, tunait y flaviovich.

Estoy totalmente de acuerdo con tunait, es mas sencillo utilizar funciones literales, si prefieres utilizar attachEvent y addEventListener, también deberás utilizar detachEvent y removeEventListener, ya que una vez asignado una función a un evento debes ante eliminar el evento para asignarle otra función.

Te envío un ejemplo para que veas que es más laborioso.

Código PHP:

  <html>
<head>
<title>Manejadores de eventos</title>
</head>
<body>
<form name="form1" id="form1" style="display:none;">BUSCADOR<br>
<input type="text" size="50">
</form>
<div id="test">ABRIR</div>
<script language="JavaScript" type="text/javascript">
<!--
 
//-------------- Funciones de eventos  ---------------------
 
function addEvent(obj, evType, fn, useCapture){
    if (obj.addEventListener){
      obj.addEventListener(evType, fn, useCapture);
      return true;
    } else if (obj.attachEvent){
      var r = obj.attachEvent("on"+evType, fn);
      return r;
    } else {
      alert("Handler could not be attached");
    }
}
 
function removeEvent(obj, evType, fn, useCapture){
    if (obj.removeEventListener){
      obj.removeEventListener(evType, fn, useCapture);
      return true;
    } else if (obj.detachEvent){
      var r = obj.detachEvent("on"+evType, fn);
      return r;
    } else {
      alert("Handler could not be removed");
    }
}
//-------------------------------------------------------
 
var handler_obj = document.getElementById("form1");
// funciones que enviamos como argumento a addEvent
// las guardamos en las variables func_open y func_close
var func_open = (function(event){
 if(event.target){event.stopPropagation()}
 else if(event.srcElement){event.returnValue = false;}
 abrir(event,handler_obj);})
 
var func_close = (function(event){
 if(event.target){event.stopPropagation()}
 else if(event.srcElement){event.returnValue = false;}
 cerrar(event,handler_obj);}) 
 
function abrir(e,obj){
   var objeto_buscador = e.target ? e.target : e.srcElement ;
   objeto_buscador.innerHTML = "CERRAR";
   obj.style.display = "inline";
   removeEvent(objeto_buscador ,"click",func_open ,false);
   addEvent(objeto_buscador ,"click",func_close,false);
}
function cerrar(e,obj){
   var objeto_buscador = e.target ? e.target : e.srcElement ;
   objeto_buscador.innerHTML = "ABRIR";
   obj.style.display = "none";
   removeEvent(objeto_buscador,"click",func_close,false);
   addEvent(objeto_buscador,"click",func_open,false);
}
 
addEvent(document.getElementById("test"),"click",func_open,false);
 
//-->
</script>
 
</body>
</html> 
  

Saludos

[el_javi]

Me parece genial, y tampoco es tan enreversado la solución planteada.

El único inconveniente que le veo, es el hecho de que por cada función que quiera asociar a un evento, he de tener la propia función y el "manejador" definido, si necesita pasar parámetros.

Pero la solución, me parece bastante profesional, y veo que es multiplataforma.

Muchas gracias por todo gente.

[kepawe]

Hola de nuevo , las funciones addEvent y removeEvent, no son de mi creación, podrás verlas en este enlace , al cesar lo que es del cesar.

Puedes enviar argumentos con una función literal, por ejemplo:

Código PHP:

   
addEvent(document.getElementById("test"),"click",function(event){abrir(event,handler_obj)},false); 
   

El problema sería borrar el evento, yo al menos no he conseguido borrarlo, puede que encuentre una solución, aparte de la que he planteado antes.

Creo que se podría hacer una función genérica, para no tener que almacenar cada función en una variable.
Creo que se puede conseguir utilizando prototype de Function, probare haber si lo consigo, si es así, la enviare.

Saludos

[el_javi]

Buenos diías kepawe.

No he podido mirar a fondo lo que me contestaste el viernes. He estado muy liado, pero gracias de nuevo.

Sería genial generalizar el agregar y borrar eventos dinamicamente con parámetros.

yo, con lo que me mandaste, también estoy mirando alguna forma de generalizarlo.

Igualmente, si encuentro solución, lo postearé, sin ningún problema.

De nuevo, muchisimas gracias.

[SiR.CARAJ0DIDA]

cuando se asigna un evento a un objeto, se pasa implicito el objeto como parametro. ej:

miobjeto.onclick = funcion;
function funcion()
{
this.color = 'red';
}

this se refiere a miobjeto.