Definiendo eventos desde Javascript

Bonaparta · #1 (**permalink**) 01/10/2007, 01:09

Hola, tengo una gran duda acerca de los eventos.. si "disparo" un evento de la siguiente forma funciona perfectamente:

(Archivo HTML)

Código:

<html>
<head>
<script type = "text/javascript" src = "archivo.js"></script>
</head>
<body>
       <a href="#" id = "elemento" onclick = "foo()">Click!!</a>
</body>
</html>

(Archivo Javascript)

Código:

function foo(){
       alert("Hola Mundo");
}

Pero si quiero hacerlo de esta forma:

(Archivo HTML)

Código:

<html>
<head>
<script type = "text/javascript" src = "archivo.js"></script>
</head>
<body>
       <a href="#" id = "elemento" >Click!!</a>
</body>
</html>

(Archivo Javascript)

Código:

function foo(){
       alert("Hola Mundo");
}

obj =  document.getElementById('elemento');
obj.onclick = foo(); (a)
 //ó
obj.onclick = foo; (b)

Con el caso "a" consigo que al cargar la página me aparezca el alert, pero luego al hacer click sobre el link ya no.
Con el caso "b" consigo un link que no hace nada.

¿Por qué se dá esta situación? . Ví muchos ejemplos de esta forma que deberían funcionar.. (llámese www.quirksmode.org , etc.).

Desde ya, muchas gracias.

caricatos · #2 (**permalink**) 01/10/2007, 01:24

Hola Bonaparta, bienvenido a los foros

:

La forma adecuada es el caso b, pero cuando se hace la asignación del evento, ese "elemento" tiene que existir, pero si la asignación la haces sin tener definido el tag con id="elemento" se produce un error (seguro que tu navegador lo tiene que reflejar)...

Puedes definir la asignación después de definir el tag (en un bloque "script" dentro del body) o activarlo después de cargarse la página con window.onload o document.body.onload

Saludos

Bonaparta · #3 (**permalink**) 01/10/2007, 01:37

¡Wow! ¡Qué velocidad!

... ¡Muchas gracias Caricatos!.

Siguiendo tus consejos el código quedó de la siguiente forma:

(Archivo HTML)

Código:

<html>
	<head>	
		<script type="text/javascript" src="file.js"></script>
	</head>
	<body onload="foo();">
	<form name="the_form">
		<a href = "#" id = "elemento">Click!</a> 
	</form>
	</body>
</html>

(Archivo Javascript)

Código:

function mensaje(){
		alert("texto");
}

function foo(){
	obj = document.getElementById('elemento');
	obj.onclick = mensaje;
}

caricatos · #4 (**permalink**) 01/10/2007, 02:01

Hola:

También se pueden asignar eventos con addEventListener, que es algo así como la forma oficial DOM, pero como ya sabrás, explorer hace sus implementaciones como le dá la gana, y utiliza algo propio (attachEvent)... pero es una forma un poco más liosa.

Por cierto, no sé si usas un editor que mete código sin que lo pidas, pero en tu último ejemplo hay un "form" innecesario.

Saludos

derkenuke · #5 (**permalink**) 01/10/2007, 09:58

Sólo comentar dos cosillas:

Código PHP:

  function foo(){ 
       alert("Hola Mundo"); 
} 
obj.onclick = foo(); (a) 
 //ó 
obj.onclick = foo; (b)

La forma (a) funciona siempre que foo() devuelva una función. Es decir:

Código PHP:

  function foo(){ 
    var f = function() { 
        alert("Hola Mundo"); 
    }; 
    return f; 
}

Tolo lo que le asignes a onclick tiene que ser una función en sí, no el resultado de esa función (tu obj.onclick = foo(); es lo mismo que obj.onclick = undefined; porque tu foo() no devuelve nada , o undefined).

Funciones que devuelven funciones, un temita complicado, pero leí hace poco un par de utilidades que puede tener. De momento sólo les veo complicación.

Un saludo.

Bonaparta · #6 (**permalink**) 01/10/2007, 12:32

Cita:

Iniciado por caricatos

Por cierto, no sé si usas un editor que mete código sin que lo pidas, pero en tu último ejemplo hay un "form" innecesario.

Jeje, es que después intenté hacerlo con un botón, y para seguir con lo que escribí antes en este post, volví al link y se mezcló ese trozo de código.

Muchas gracias nuevamente y saludos!