Foros del Web » Programando para Internet » Javascript »

AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

Estas en el tema de AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/09/2013, 02:28
Avatar de Albuss  
Fecha de Ingreso: enero-2012
Ubicación: Coruña
Mensajes: 475
Antigüedad: 7 años, 6 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
  #2 (permalink)  
Antiguo 18/09/2013, 08:14
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 4 meses
Puntos: 1485
Respuesta: AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

buenas...

el problema que tienes no es de alcance —scope— de variables. sino que estás creando variables globales que se sobreescriben cada vez que invocas el método del objeto. mi recomendación es que siempre trabajes con variables locales, a no ser que realmente necesites una variable global. utilizando variables locales te evitas posibles fallos como el presente.

Código:
function prototype(id){	
    this.ID = id;
    this.CrearDiv = function CrearDivs(){
        var ID = this.ID;
        var Capa = document.getElementById('espacioPrueva');
        var DivPrueva = document.createElement('div');
        DivPrueva.style.width = 200+'px';
        DivPrueva.style.height = 200+'px';
        DivPrueva.style.margin = '10px 10px';
        DivPrueva.style.background = 'hsla(120,100%,50%,1)';
        Capa.appendChild(DivPrueva);
      
		DivPrueva.addEventListener("mouseover", function (){
        document.getElementById('log').innerHTML ='ObjetoPrueva ' +ID;
        }, false);
	
	}
	
}
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 18/09/2013, 17:01
Avatar de Albuss  
Fecha de Ingreso: enero-2012
Ubicación: Coruña
Mensajes: 475
Antigüedad: 7 años, 6 meses
Puntos: 30
Respuesta: AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

Muchas gracias Zerokilled, pero una pregunta, Pensaba que cuando creaba una nueva instancia del objeto, era este el que guardaba las variables de su prototipo, es decir, que dos objetos diferentes nunca se sobrescriben variables de sus prototipos ¿por que en javascript no funciona asi?
  #4 (permalink)  
Antiguo 19/09/2013, 07:13
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 4 meses
Puntos: 1485
Respuesta: AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

debes tener claro diferenciar propiedades y variables en el contexto de un constructor. en adición, ahí no estás usando prototipo, al menos no como lo define el lenguaje. a diferencia de otros lenguajes, las variables definidas en javascript ‒sin importar su contexto‒ son siempre globales a no ser que explícitamente se declaren con var o que sean un argumento de la función. por ejemplo, en tu función pudistes usar directamente la variable id ‒de la función prototipo‒ en lugar crear un clon de esa variable. otra de las diferencias, las variables en los constructores no son explicitamente propiedades del objeto, aunque se le puede considerar propiedad privada siempre y cuando sea una variable local al constructor. en este sentido no se sobreescriben una a la otra.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Etiquetas: addeventlistener, alcance, objetos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:07.