Eventos (III) Manejadores de eventos

Posted by On marzo 28, 2016 1 Comment

Ya hemos visto el tipo de eventos que podemos encontrarnos, ahora necesitamos controlarlos para hacer que JavaScript haga lo que nosotros queramos, y para ello necesitamos los manejadores de eventos, ya que de otra forma los eventos carecerían de funcionalidad.

Por medio de estos manejadores de eventos podemos asociar las acciones a funciones, logrando que la aplicación reaccione.

Hay varios tipo de manejadores de eventos, y en esta entrada vamos a ver como funcionan con pequeños ejemplos, ya sabéis que el límite después de esto lo ponéis vosotros…

Manejadores de eventos como atributos de HTML

Esta es la forma más simple, aunque también puede ser la menos profesional de introducir el manejador, aun así puede llegar el momento en que os sirva para situaciones muy específicas.

Para ello debemos de incluir un atributo dentro de la etiqueta HTML, en el siguiente ejemplo vemos como funciona la introducción del manejador del evento con el propio evento:

<h1 onmouseover="alert('Evento activado')">Evento!!!</h1>

 Al pasar el ratón sobre la etiqueta h1 se activa el evento disparando el alert.

Para utilizar este tipo de manejadores, se debe de definir el atributo con el mismo nombre que el evento que se trata de ejecutar y el contenido del mismo es el código que se quiere ejecutar.

Podemos si queremos utilizar diferentes atributos para una misma etiqueta dependiendo de la acción que esperamos que se realice.

De este modo podemos ejecutar uno de los eventos más utilizados en JS, onload, ya que este evento solo se ejecuta cuando la web se ha cargado completamente, ya que las funciones que nos permiten manipular el DOM solo están disponibles una vez que ha cargado la web.

<body onload="alert('la web se ha cargado con exito);">
    ...
</body>

Manejadores de eventos utilizando this

Cuando programamos eventos, podemos utilizar la palabra reservada this con el objetivo de referirnos al elemento html que provoca dicho evento.

Siguiendo con el ejemplo anterior, vamos a provocar que cuando pasemos el ratón sobre el h1 este cambie de color, al entrar y salir de su área.

<h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">Evento!!!</h1>

Como vemos es muy sencillo, el problema consiste en que cuando el código o la funcionalidad crecen, la opción de poner los eventos directamente como atributos no es la más adecuada, de este modo es cuando se utilizan los manejadores como funciones externas…

Manejadores de eventos como funciones externas

Utilizando este método, lo que hacemos es extraer las instrucciones de JavaScript e introducirlas en una función externa, incluyendo el nombre de la función que se va a llamar cuando se ejecuta el evento.

La invocación de estas funciones se realiza de forma normal, con el nombre de la función seguido de los paréntesis y de dentro de estos los atributos que sean necesarios.

Aunque nos encontramos con el problema de que en las funciones externas no podemos utilizar la palabra this, por lo que es necesario pasar dicha variable como un parámetro.

En el siguiente ejemplo realizamos la misma acción que en el anterior pero utilizando funciones, y aunque pueda parecer que el código es  más complejo, es por que el ejercicio es de suma simpleza, pero cuando empieza a complicarse un poco es mucho mejor utilizar funciones para manejar los eventos.

<h1 onmouseover="dentro(this)" onmouseout="fuera(this)">Evento!!!</h1>

<script>
	function dentro(elemento){
		elemento.style.color='red';
	}

	function fuera(elemento){
		elemento.style.color='blue';
	}
</script>

Esta forma de trabajar ya se acerca a lo ideal, aunque aun nos queda por dar un paso más donde no hay que introducir absolutamente nada de JS dentro del código HTML, haciendo que nuestros scripts no tengan lo que se denomina como código espagueti, esta forma es la conocida como…

Manejadores de eventos semánticos

Para utilizar los manejadores semánticos debemos de cumplir con una serie de condiciones:

  • Asignar un identificador único al elemento XHTML por medio de una id
  • Crear una función JavaScript que maneja el evento
  • Asignar la función al evento y elemento deseados

Esto que puede parecer difícil es realmente muy sencillo, en el siguiente ejemplo lo veremos paso a paso, explicándolo como es costumbre:

<h1 id="evento">Evento!!!</h1>

<script>
	function dentro(){
		document.getElementById('evento').style.color='red';
	}

	function fuera(){
		document.getElementById('evento').style.color='blue';
	}

	function clikea(){
		alert('hola');
	}

	document.getElementById('evento').onmouseover = dentro;
	document.getElementById('evento').onmouseout = fuera;
	document.getElementById('evento').onclick = clikea;
</script>

Si ejecutamos el script vemos que al entrar en el área de h1 el texto se pone rojo y al salir azul e incluso si hacemos click aparece un alert, pudiendo hacer que nuestro elemento reaccione a diferentes tipos de eventos.

De hecho podríamos dividir el código en tres pares:

  • La primera, es nuestro elemento HTML al que le hemos puesto una id llamada evento.
  • La segunda, son las funciones que van a provocar la acción que necesitamos
  • La tercera, son las llamadas a las funciones.

Ahora veamos como funciona el script…

Cuando se realiza algunos de los posibles eventos, la tercera parte capta el evento por medio de la id y llama a la función (sin paréntesis), a continuación se ejecuta la función que realiza el evento.

Aunque pueda parecer una forma muy compleja, es en realidad muy sencilla y deja el código HTML muy limpio. De hecho su único inconveniente radica en que tiene que cargarse la página completa para que funcione, pero esto se soluciona fácilmente poniendo la codificación JavaScript al final del body e introduciendo la función onload de la siguiente forma:

<h1 id="evento">Evento!!!</h1>

<script>
window.onload = function(){
	function dentro(){
		document.getElementById('evento').style.color='red';
	}

	function fuera(){
		document.getElementById('evento').style.color='blue';
	}

	function clikea(){
		alert('hola');
	}

	document.getElementById('evento').onmouseover = dentro;
	document.getElementById('evento').onmouseout = fuera;
	document.getElementById('evento').onclick = clikea;
}
</script>

Aquí vemos como en la línea 4 hemos introducido window.onload = function(){…} para que el script solo esté disponible una vez que ha cargado la web.

De esta forma ya podemos utilizar los manejadores de eventos para nuestros fines y empezar a lograr webs dinámicas sin demasiada complejidad.