Eventos JS fuera del HTML (y la W3C)

Computer XTress · #1 (**permalink**) 14/06/2007, 16:20

Hola a todos!

Estoy buscando alguna forma de utilizar eventos JS separados del HTML, es decir, para no tener que llamarlos en línea dentro de cada elemento (mi idea es armar algo mio, no quiero depender de librerías o framworks y no entender cómo funciona).
El hecho es que ni bien empece a buscar me encontré con varios temas que todavía me resultan confusos...

Por un lado, me entero de que la W3C ahora considera 'deprecated' el uso de eventos onclick, onmouseover, onmouseout, etc. adentro de los propios elementos, por ejemplo:

<img onclick='alert(msg);' />

Esto en teoría ya no corre para la W3C, aunque sigan validando bien.

Seguí averiguando y llegué aquí:
http://www.w3.org/TR/DOM-Level-2-Events/events.html

En la URL la W3C presenta un modelo de eventos basados en el DOM. Todavía estoy leyendo esta página pero ya encontré OTRO sitio en el que dicen que este modelo creado por la W3C no es funcional en todos los browsers (¿de qué me sirve entonces si tengo clientes que quieren TODO?)

Ahora estoy bastante confundido... no se si sentarme a leer un poco cómo se maneja JS orientado a objetos y crear mi propia forma de separar eventos del HTML, si seguir estudiando lo que propone la W3C y ver cómo funciona ó qué...

¿Alguno está al tanto de estos temas y puede echar un poquito de luz?

Muchisimas gracias de antemano!

Eduardo

PD: La W3C también considera ahora -deprecated- el uso de " target='' " !

Computer XTress · #2 (**permalink**) 14/06/2007, 16:46

Acá encontré algo útil, a ver si sirve de algo:

http://www.w3.org/TR/WD-script-960208.html#handlers

Indica una forma de definir los manejadores de eventos que a simple vista parece permitir crear un archivo separado con los eventos y a su vez, W3C compilant.

¿Alguno usa esta metodología?

MaBoRaK · #3 (**permalink**) 14/06/2007, 19:05

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

Bueno el segundo link es HTML3 !!! estamos en HTML4

y a lo que te refieres es a usar EVENT HANDLERS y apoyo de que esto siempre debe ser lo correcto y aplicarse eventos siempre a objetos DOM y no "facilmente" a innerHTML, de esta forma nos obliga a ser mas organizados con nuestro desarrollo.

Los EventHandlers son compatibles en todos los navegadores, claro que la forma de hacerlo varía (solo en IE).

connection closed.

Computer XTress · #4 (**permalink**) 14/06/2007, 19:29

Hola Maborak, grax por tu respuesta.

Sí, me di cuenta despues de que era HTML 3 y que los scripts estaban en "WebScript" y "VBScript", jeje :)

Finalmente di en el clavo... encontré muchisimas webs interesantes, pero esta fue la que más me sirvió

http://www.digital-web.com/articles/...d_structure_2/

Lo explico desde cero por si hay alguno que está en cero con este tema, tal vez le viene bien.

La idea es, usando javascript, identificar el elemento y luego asignarle una función a un evento. Este es un ejemplo rapido y vulgar, pero es el mejor para entender lo tan simple que resulta:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" language="javascript1.2" src="scp.js"></script>

</head>

<body>

	<div id='txt' style='width: 200px; height: 200px; background-color: blue;' onclick="alert('hola');"></div>

	<script>
		var fnc = function onclick(event) {
			alert("hola");
		};

		document.getElementById('txt').onclick = fnc;
	</script>
</body>
</html>

Inicialmente yo intentaba cosas como: document.getElementById('txt').onclick = alert("Bravo, está funcionando!"); y no andaba bien, ejecutaba ese alert() cuando iniciaba la página. Eso es por que el contenido de elemento.onclick tiene que ser una función y no directamente un código (o algo así... :P).

Si le asignamos un onclick='' dentro de la etiqueta al elemento y luego hacemos alert del elemento.onclick, vemos esto:

function onclick(event) {
alert("hola");
}

Y bueno, el resto es deducción.

Ahora queda refinar un poco la metodología esta... por lo que veo en las webs todos hacen algo como: elemento.evento = variable; ó algo así... es decir, no escriben todo el chorizo de "function onclick(Event)...."

Veremos que encuentro!

Un saludo

Edu