Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Problema con DOM y eventos

JavaScript - Problema con DOM y eventos

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Problema con DOM y eventos

Publicado por Jorge (2 intervenciones) el 24/04/2016 19:27:51
Cuando se añade el botón se dispara de golpe el evento. Yo lo que quiero es que el evento se dispare cuando
se pulse el botón. ¿Alguien sabe que he hecho mal o por dónde pueden ir los tiros? A continuación el HTML completo (19 líneas).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="es">
  <head>
	<meta charset="UTF-8"/>
	<script>
		function addButton(){
			 var button = document.createElement("button");
			 button.innerHTML = "Botón";
			 document.body.appendChild(button)
			 button.onclick(problem())
		}
		function problem(){
			alert("Debería decir esto cuando lo pulsas, no cuando lo creas.");
		}
	</script>
  </head>
  <body onload="addButton()">
  </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con DOM y eventos

Publicado por xve (2100 intervenciones) el 24/04/2016 20:43:07
Hola Jorge, al definir el evento onclick, no es una función... tienes que hacerlo así:
1
button.onclick=problem;

Sin los paréntesis!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Problema con DOM y eventos

Publicado por Jorge (2 intervenciones) el 25/04/2016 01:22:14
La cosa es que en mi problema real, el código anterior era para mostrar mejor mi problema sin mostrar un código muy grande, quiero pasarle parámetros a la función que quiero que se ejecute. El código que paso a continuación funciona perfectamente, pero no se si es la forma más limpia o correcta de hacerlo en Javascript, es que todavía no consigo entender muy bien por qué cuando llamo a la función debe ser sin paréntesis, de esta forma nunca puedo pasarle argumentos. ¿Cómo se hace esto?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="es">
  <head>
	<meta charset="UTF-8"/>
	<script>
		function addButton(){
			 var button = document.createElement("button");
			 button.innerHTML = "Botón";
			 document.body.appendChild(button)
			 button.onclick=problem;
		}
		function problem(){
			var hello = "Hola"
			sayHello(hello)
		}
		function sayHello(hello){
			alert(hello);
		}
	</script>
  </head>
  <body onload="addButton()">
  </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con DOM y eventos

Publicado por xve (2100 intervenciones) el 25/04/2016 08:53:42
Hola Jorge, para ello, puedes utilizar el setAttribute...

1
button.setAttribute('onclick','problem("valor1", "valor2")');
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con DOM y eventos

Publicado por Vainas (258 intervenciones) el 25/04/2016 20:59:03
Buenas:

Te voy a dar una explicacion larga.

1
<body onload="addButton(); alert("hola"); return false;">

Si lo pongo asi entiendes que cuando colocas una cadena en el onload o onclick de una etiqueta esta no tiene que ser el nombre de la funcion sino de un conjunto de algoritmos que se van a ejecutar?. Esto es una forma que tienes de agregar eventos en html. Segun esto podrias hacer algo asi?

1
<div onclick="nombreFunction(parametro1, parametro2, ...)">

Pero puede que necesites que sea dinamico o bien los parametros o bien asignar el manejador a la etiqueta. Seguimos con los ejemplos.

1
button.onclick=problem;
o
1
button.onclick=function(){...};

Aqui asignas a onclick una funcion. Le tienes que pasar una function o el nombre de una function o una variable function.

cualquier manejador de eventos en js espera el nombre de una function y ya cuando se llame al manejador se le va a pasar como primer parametro el evento que se esta ejecutando. Esto lo habras visto en alguna parte:

1
button.onclick=function(event){...};

Ya que no puedes pasarle un parametro a estas funciones (ya que su valor se va a reemplazar con el evento), la gente suele usar closures, esto es una forma que tiene js de guardar variables dentro de una funcion. Antes de explicarte esto tienes que saber que en js puedes desvolver una function y hacer algo asi:

1
2
3
4
5
6
function devuelveFunction(){
 
return function(event){...}
}
//Aqui le decimos que ejecute function y que lo que devuelve (que es una function) la almacene en el onclick

button.onclick=devuelveFunction();

y closures es esto:

1
2
3
4
5
6
7
function devuelveFunction(){
var parametro1;
var parametro2;
return function(event, parametro1, parametro2){...}
}
//Aqui le decimos que ejecute function y que lo que devuelve (que es una function) la almacene en el onclick

button.onclick=devuelveFunction();

Las variables que se han creado dentro de devuelveFunction no se pierden sino que se guardan para cuando se ejecute el evento.

Otra forma de añadir manejadores de eventos es con:

1
button.addEventListener("click", function(){...});

puedes aplicar lo mismo que he dicho anteriormente:

1
button.addEventListener("click", devuelveFunction());

Y ahora es cuando te digo que ha vendio jQuery a hacernos la vida mas facil. Esto no lo sabia pero lo aprendi hace poco (esta explicado en la documentacion de jQuery http://api.jquery.com/on/):

1
$( "button" ).on( "click", {parametro1: "dato1", parametro2: "dato2"}, problem);

y dentro de problem:

1
2
3
4
5
function problem(event){
// event.data.parametro1

// event.data.parametro2

alert("Debería decir esto cuando lo pulsas, no cuando lo creas.");
}

Y creo que no me dejo nada en el tintero.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con DOM y eventos

Publicado por xve (2100 intervenciones) el 25/04/2016 23:20:41
Muy bueno!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar