Acceder a las propiedades de un objeto referenciado desde una escucha de eventos

PatomaS · #1 (**permalink**) 08/04/2006, 09:38

Hola gente

Tengo una duda que que carcome minuto a minuto y aunque he intentando varias cosas, no encuentro la salida ...

Tengo una función en la que asigno «escuchas» a determinados objetos y desde esa asignación de escuchas, asigno la función que se encargará de trabajar con ellos, pero ...

siempre hay un pero ¿no?

;)

Pero el problema que tengo, es que no logro determinar el objeto con Explorer. Con firefox o similares de la familia Gecko, no tengo problema con ello, pero no lo logro con Explorer.

Para clarificar, el primer paso es este:

Código:

if (Objeto[n].addEventListener) {
	Objeto[n].addEventListener("click", funcion, false);
} else {
	Objeto[n].attachEvent("onclick", funcion(this));
}

Luego la función que recibe la llamada y trabaja con el evento y el objeto tiene una serie de cosas, pero nada funciona con el Explorer, por ejemplo, una cosa sencilla como esta, no funciona.

Código:

function funcion(evento) {
	alert(evento.type);
}

Y seguimos, en dicha función, puedo tener acceso al objeto cuyo evento paso mediante el uso de "this" y DOM. Sin embargo, con el Explorer, solo logro generar una ventana indicando que tengo un "[object]". Obviamente, esta alerta de javascript de explorer la logro si al alert anterior le quito el ".type", pero con explorer no logro obetener nada más que "[object]"

Por ejemplo, esto:

Código:

var pagina = this.getAttribute('href');

Para tratar de aclarar aun más un poco; en el ejemplo que puse, asigno el evento a un vínculo, cuango hago clic en el, sale la típica ventanita de javascript diciendo "click", lo cual es correcto ya que el evento que capturo es un click. Sin embargo, en explorer no aparece nada.

La función en la que estoy trabajando aun tiene algunos detallitos que solventar, pero son cosas menores, pero esta ciertamente me device ya que es la funcionalidad completa la que pierdo.

Bueno, espero haberme explicado adecuadamente, si no fuera así, por favor digánmelo para aclararme un poco más.

Nuevamente disculpen las molestias, seguramente la respuesta de esto es sencilla, pero ya saben, los hay que somos un poco limitaditos y cuando los scripts no son bajitos ni se dejan, pues la cosa se pone dura...

:)

Felicidad

PatomaS · #2 (**permalink**) 09/04/2006, 09:25

Hola gente

Bueno, al parecer llegué a una solución. Dicha solución fué reescribir la llamada a la función del explorer, pasando de esto:

Código:

if (Objeto[n].addEventListener) {
	Objeto[n].addEventListener("click", funcion, false);
} else {
	Objeto[n].attachEvent("onclick", funcion);
}

a esto

Código:

if (Objeto[n].addEventListener) {
	Objeto[n].addEventListener("click", funcion, false);
} else {
	Objeto[n].attachEvent("onclick", funcion);
}

Suena bastante evidente, y debo decir que lo es, pero cuando revisé la documentación referente al explorer, en los ejemplos que usaban, estaban los paréntesis y sabiendo que no es raro que cada quien use su propia mecánica, no me llamó demasiado la atención.

Por casualidad fuí eliminando cosas y al elimnar esto en la llamada, la función de trabajo empezó a hacer lo que debía.

Complementando un poquito, en la función que debe hacer el trabajo, accedo a las propiedades del objeto cuyo evento ha sido detectado con esta sintaxis:

Código:

function funcion(evento) {
	...
	evento.srcElement.getAttribute('href');
	...
}

En explorer, sustituir evento por this, no funciona.

Seguramente hay más soluciones a lo que planteaba y seguramente era muy evidente, pero debo reconocer que me costó un poco tropezarme con esto. Menos mal que la casualidad y la suerte salieron en mi ayuda.

Felicidad

kepawe · #3 (**permalink**) 09/04/2006, 17:53

Hola Patomas

Basándome en los script de Scott Andrew LePera, en este enlace encontraras los script y una explicación de ellos.
Lo he modificado para que envíe los argumentos como has indicado anteriormente, para esto he utilizado básicamente el método apply().

Bueno, hay te pongo un ejemplo:

Código:

<html>
<head>
<title>Manejadores de eventos</title>
</head>
<body>
<div id="test">Event1</div>
<div id="test1">Event2</div>
<div id="remove">Eliminar eventos</div>
<script language="JavaScript" type="text/javascript">
<!--
function funcion(event,str,n){

   alert(this.id + "\n" + event.type + "\n" + str)
 
   if(typeof(arguments[2]) != "undefined") {alert(arguments[2]+ " = " + n)}
}
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");
  }
}
function addEvent(obj, evType, fn, useCapture,args){

 // Esta función almacena en this el  objeto que desencadena el evento, y como
 // primer argumento el evento, después el resto de los argumentos, formados por los elementos del
 //array, si es necesario enviar más argumentos
 
  var fnc = (function(event){fn.apply(obj,[event].concat(args))});
  
  if (obj.addEventListener){
    obj.addEventListener(evType,fnc, useCapture);
  } 
  else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType,fnc );
  } 
  else {
    alert("Handler could not be attached");
  }
  // devolvemos la funcion creada, servira más tarde para poder eliminar el evento, 
  // es necesario, de otra manera, no se podría eliminar el evento
  return fnc;
}

/*
   addEvent(
   @param object ,
   @param string,
   @param function,
   @param boolean,
   @param array,
   )
*/
var ref1 = addEvent(document.getElementById("test"),"click",funcion,false,["String1",2]);
var ref2 = addEvent(document.getElementById("test1"),"click",funcion,false,["String2"]);

/*
   removeEvent(
   @param object ,
   @param string,
   @param function, 
   @param boolean,
   )
*/
document.getElementById("remove").onclick = function(){
    removeEvent(document.getElementById("test"),"click",ref1,false);
    removeEvent(document.getElementById("test1"),"click",ref2,false);
}
//-->
</script>

</body>
</html>

Como podrás observar, también es posible enviar más argumentos.

Saludos

PatomaS · #4 (**permalink**) 10/04/2006, 08:25

Hola gente, hola kepawe

:)

Bueno, te comento que la página que me citabas, la había visto, pero ahi algo en su código que no termina de agradarme, aunque porsupuesto, forma parte fundamental de las 4 cosas que hay en mi cabeza relacionadas con JavaScript.

Pero más que por ese vínculo, quería agradecer tu respuesta, que me pareció ciertamente bastante buena y espcialmente el enfoque que le diste, haciendo uso de elementos con truco como el apply, eso me pareció un recurso excelente de tu parte.

Personalmente no se me hubiera cruzado por la cabeza usarlo.

:)

Gracias.

Sobre el script en el que estaba trabajando, ya lo terminé ayer pero hoy tras tu respuesta y debido a un incomprensible comportamiento en opera y k-meleon, he estado revisándolo a fin de hacer las correcciones necesarias y en este momento parece que hace su trabajo como debe ser en todos los navegadores que he probado.

Aun me falta unas cuantas pruebas, como más navegadores y páginas más grandes, ya que el script debe adaptarse a páginas en las que no puedo controlar realmente el contenido.

Bueno, me despido por ahora, no aburro más, pero espero contar con ayudas como esta en posteriores problemas, de estos nunca me faltan...

;)

Felicidad