Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/09/2013, 02:28
Avatar de Albuss
Albuss
 
Fecha de Ingreso: enero-2012
Ubicación: Coruña
Mensajes: 475
Antigüedad: 12 años, 9 meses
Puntos: 30
Pregunta AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

Buenas caballeros,


Llevo toda la noche despierto intentando resolver un paradigma que yo mismo he creado dentro de una aplicacion web que estoy desarrollando, expongo un ejemplo simplificado de dicho error y un link a jsFiddle listo para ejecutar.


Ovbiamente esto va de alcances de los objetos, mi problema reside en que ...., bueno, es mas engorroso explicarlo que enseñarlo, asi que directamente expongo un ejemplo simplificado lo máximo posible pero que sigue conteniendo el error

Código Javascript:
Ver original
  1. function prototype(id){
  2.    
  3.     this.ID = id;
  4.        
  5.  
  6. this.CrearDiv = function CrearDivs(){
  7.        
  8.         ID_DuplicoLaVariableParaElAlcanceDelaPila = this.ID;
  9.        
  10.         Capa = document.getElementById('espacioPrueva');
  11.         DivPrueva = document.createElement('div');
  12.         DivPrueva.style.width = 200+'px';
  13.         DivPrueva.style.height = 200+'px';
  14.         DivPrueva.style.margin = '10px 10px';
  15.         DivPrueva.style.background = 'hsla(120,100%,50%,1)';
  16.         Capa.appendChild(DivPrueva);
  17.      
  18.         DivPrueva.addEventListener("mouseover", function () {console.log(  ['ObjetoPrueva'+ID_DuplicoLaVariableParaElAlcanceDelaPila] ) }, false); // Aquí reside lo importante, al pasar el mouse, deberia de devolver el objeto correcto en el cual el rectángulo ha sido creado, solo devuelve el ultimo objeto creado ¿por que se sobrescriben? si solo crease un rectángulo aparecería en la consola el objeto uno
  19.    
  20. }
  21.  
  22. var ObjetoPruevaUno = new  prototype(1);
  23. ObjetoPruevaUno.CrearDiv();
  24.  
  25. var ObjetoPruevaDos = new  prototype(2);
  26. ObjetoPruevaDos.CrearDiv();


Código HTML:
Ver original
  1. <div id="espacioPrueva"></div>
  2. </body>


El experimento para hayar el error es sencillo, pasar el mouse por encima de los dos rectángulos creados ¿que obtendremos? pues siempre obtendremos el ultimo objeto creado en el log de la consola, es decir, me es imposible crear mediante este metodo una forma de devolver el objeto correcto del rectangulo, que seria 1 y 2 respectivamente, cuando en este ejemplo en la consola siempre veremos que nos devuelve el objeto 2 ¿por que?


Adjunto un link a JSFiddle con un ejemplo interactivo y listo : http://jsfiddle.net/yRk3j/1/

Última edición por Albuss; 18/09/2013 a las 07:09 Razón: espacios