[DOM] : como clonar un elemento+eventos?

MaBoRaK · #1 (**permalink**) 08/03/2007, 08:55

loading............

Tengo un obejto tipo DIV... con un evento

var objectoDiv=document.createElement("div");
objetoDiv.addEventListener("click", funcionRetorno,true);
var div2 = objectoDiv.cloneNode(true);

bueno div2 es el objeto clonado pero el evento no se clona.... acaso esto no es posible? :S

gracias :D

connection closed.

caricatos · #2 (**permalink**) 08/03/2007, 09:42

Hola:

Los eventos creados dinámicamente no lo sé, pero si están definidos desde el prncipio se clonan también...

Fíjate en este ejemplo:

Código:

<html>
<head>
<title>
	Clonación
</title>
<script type="text/javascript">
function sube(que) {
	var nuevo = que.cloneNode(true);
	que.parentNode.appendChild(nuevo);
	que.parentNode.removeChild(que);
}
</script>
</head>
<body >
<div id="contenedor" style="position: relative; height: 200px">
<div id="amarillo" style="width: 120px; height: 120px; background-color: yellow; position: absolute; top: 5px; left: 5px; border: 1px solid black" onclick="sube(this)"></div>
<div id="rojo" style="width: 120px; height: 120px; background-color: red; position: absolute; top: 35px; left: 35px; border: 1px solid black" onclick="sube(this)"></div>
<div id="azul" style="width: 120px; height: 120px; background-color: blue; position: absolute; top: 65px; left: 65px; border: 1px solid black" onclick="sube(this)"></div>
</div>
</body>
</html>

Pinchando sobre cualquier recuadro se clona y superpone al resto, manteniendo estilos y eventos (sirve pas simular un z-index alto...)

Saludos

demiurgo_daemon · #3 (**permalink**) 08/03/2007, 09:43

según yo, al momento de clonar no se agrega el evento, ya que no es un atributo del elemento (de lo contrario, nadie saldría de

Código:

elemento.onclick

en primer lugar

). piénsalo como en un ide, tipo netbeans o visual studio: si pones un botón y le asignas un evento, al copiarlo puede suceder una de dos cosas:

los manejadores de eventos no se copian; tienes que escribirlo a mano o asignarlo como el original
sí se copian, pero de manera explícita; es decir, se duplica el código, con todo y el manejador de evento

el mensaje de caricatos refuerza lo que te digo, elemento.onclick es un atributo del elemento, pero addeventlistener no agrega un atributo, sino el manejador que está en otro lado por completo.

saludos

MaBoRaK · #4 (**permalink**) 08/03/2007, 10:07

loading............

Quiero tener un manejador de eventos orientado a los elementos pero sin usar atributos para ello.... hay alguna forma de saber si un elemento tiene ya un evento asignado? para de esta forma recorrer los elementos clonados .. clonando igual sus eventos

connection closed.

frijolerou · #5 (**permalink**) 08/03/2007, 11:43

¿Y por qué no simplemente vuelves a asignar el mismo evento al elemento clonado?

Código:

var objectoDiv=document.createElement("div");
objetoDiv.addEventListener("click", funcionRetorno,true);
var div2 = objectoDiv.cloneNode(true);
div2.addEventListener("click", funcionRetorno,true);

MaBoRaK · #6 (**permalink**) 09/03/2007, 10:45

loading............

No lo veo portable, porque clono por ejemplo una tabla con muchos divs e imagenes y ahi tengo como 60 eventos diferentes...... es igual me toparia con tener que saber que evento le corresponde a un elemento X en base a un elemento Y

connection closed.

MaBoRaK · #7 (**permalink**) 17/03/2007, 12:06

loading............

nadie? :(

connection closed.

derkenuke · #8 (**permalink**) 17/03/2007, 17:16

Curioso como esto sí que funciona...

Código PHP:

  function funcionRetorno() {
    alert("ja");
}
var objetoDiv=document.createElement("<div onclick='funcionRetorno()'>aa</div>");
//objetoDiv.onclick=funcionRetorno;
var div2 = objetoDiv.cloneNode(true);

alert(div2.onclick);

Quizas haya que implementar un cloneNodeMejorado para recorrer tods los eventos del objeto y copiarlos

MaBoRaK · #9 (**permalink**) 18/03/2007, 11:44

loading...........

eso funciona porque tema a onclick como un atributo del objeto pero no los event handlers x(

connection closed