Desempolvando los borradores encuentro este.
Introducción
En la nueva programación web se está tratando de separar el código Javascript del HTML y el CSS en diferentes ficheros, de forma que a nivel de mantenimiento la reducción de tiempo es considerable, ya que si el problema es de Javascript únicamente hemos de mirar los ficheros Javascript y de igual forma para los CSS y HTML.
¿Como conseguir esto?
Para conseguir separar el código hemos de tener en cuenta que el uso metodo como onClick, onSubmit,… deberían envitarse.
Pero claro si quitamos esto ¿como lanzamos eventos en nuestros controles? Muy facil usando el metodo addEventListener, se trara de un metodo que inserta el arbol DOM que creamos en el navegador (completamente transparente para nosotros) haciendo que se ejecute cuando nosotros le idicamos.
Ej.
elem.addEventListener(event,func,false);
elem – Es el elemento al que se le asignará el evento.
Event – será el evento que queramos esperar para dicho elemento.
Func – Es la función que queremos lanzar al recibir el evento en nuestro elemento.
El ejemplo de arriba se refiere al método implementado para Firefox no siendo válido para Internet Explorer.
Internet Explorer, otro mundo (otra vez)
Como siempre IE nos hace de las suyas, ya que no dispone de el método addEventListener y tenemos que idearnoslas de nuevo para poder disfrutar de un control de eventos en condiciones.
Para conseguir algo parecido tenemos el método attachEvent que no estan cómodo como el anterior, pero podemos conseguir el mismo efecto.
if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+event, func);
return r;
}Como podeis ver no es el fin del mundo, pero ya hay que molestarse. Para evitar esto, tenemos la función que se encargará de llamar a una u otra sin necesidad de nuestra interacción.
function listen(event, elem, func) {
elem = $(elem);
if (elem.addEventListener) // W3C DOM
elem.addEventListener(event,func,false);
else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+event, func);
return r;
}
else throw 'No es posible añadir evento';
}
La función se llama listen() y se ha de usar de las siguiente manera.
listen(event, elem, func);
event – Evento que queremos controlar
elem – Elemento al que añadir el evento
func – Función que se ejecutará al lanzar el evento en nuestro elemento.
Nada mejor que un ejemplo para ver más claro su funcionamiento.
HTML
<html>
<head>
<title>Titulo de la pagina</title>
<script src=”js/listen.js” type=”text/javascript” ></script>
<script src=”js/event_pag.js” type=”text/javascript” ></script>
</head>
<body>
<a href=”url.html” id=”enlace”>Esto es un enlace</a>
</body>
</html>
Javascript(event_pag.js)
function send() {Alert(“Has hecho click sobre enlace”);}
listen("click", "enlace", send );
Como podeis ver en este pequeño ejemplo estamos cargando el fichero listen.js que es la página que incluye la función necesaria para lanzar todo lo que se encuentre en event_pag.js.
En event_pag.js tendremos una lista de funciones necesarias para la página en concreto y todos los eventos que deseemos controlar definidos. En este ejemplo tenemos la función send() que nos mostrará un alert al hacer click sobre el objeto enlace.
Atencion: Parece ser que esto no funciona correctamente en IE bajor Mac.
8 comentarios, 9 referencias
+
#