Contenido

Gestión de eventos en Javascript

16 oct

+ 17

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. 

Más Información

  • Con prototype, para todos los navegadores: Event.observe(id, evento, funcion)

  • Muchas grácias David.

    Aunque si desguazamos un poco script.aculo.us llegamos al método _observeAndCache, que es muy parecido al que tenemos arriba.

    
    _observeAndCache: function(element, name, observer, useCapture) {
        if (!this.observers) this.observers = [];
    		if (element.addEventListener) {
    			this.observers.push([element, name, observer, useCapture]);
    			element.addEventListener(name, observer, useCapture);
    		} else if (element.attachEvent) {
    			this.observers.push([element, name, observer, useCapture]);
    			element.attachEvent('on'   name, observer);
    	}
    },
    

    Un saludo.

  • Hola
    ¿Como se haría para que el botón de un formulario que al hacer el submit devuelva falso y no me lleve a la página de proceso?
    Lo estoy intentando hacer con listen pero al asignarle la función para que devuelva falso pasa de hacerlo :(

  • @Artem: Debería funcionarte con algo asi.

    
    listen('submit', 'formulario', function() {
    alert("Ahora me paro");
    return false;
    } );
    

    Saludos

  • Como puedo mandar llamar una funcion on parametros.
    ????

    Frases romanticas…
    http://frasesmessenger.unlugar.com

  • Ya pudieron resolver si se puede mandar con parametros? ademas el return false; funciona en IE, pero no en FF. como se resuelve?

  • Así lo hice para pasar parametros!!!

    function listen(event, elem, func,parametros) {
    if (elem.addEventListener) // W3C DOM
    elem.addEventListener(event,function(){func(parametros);},false);
    else if (elem.attachEvent) { // IE DOM
    var r = elem.attachEvent(“on”+event, function(){func(parametros);});
    return r;
    }
    else throw ‘No es posible añadir evento';
    }

  • una consulta, si quiero que se ejecute una funcion con parámetros
    por ejemplo: quiero que en el evento sobre de una imagen, esta se agrande, my funcion seria esta:
    function agrandar(imagen)
    {
    imagen.width = 120;
    imagen.height = 120;
    }
    como llamo a esta funcion?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.