Eventos (IV) el objeto event

Durante la ejecución de nuestros programas, javascript permite obtener información sobre el ratón y el teclado mediante el objeto event.

function controladorEventos(elEvento){
	var evento = elEvento;
}

Como veremos a lo largo de esta entrada, este evento es muy útil a la hora de lograr información por medio de propiedades como type que nos indica el tipo de evento que se produce por medio de type, la cual devuelve el tipo de evento, que se denomina igual que el propio evento pero sin el prefijo on.

var tipoEvento = evento.type;

De este modo y modificando el ejemplo de la entrada anterior, podemos modificar nuestro código ilustrar lo que estamos diciendo:

<h1 id="evento">Evento!!!</h1>
<script>
function controladorEventos(elEvento){
	var evento = elEvento;
	switch(evento.type){
		case 'mouseover':
			this.style.color='red';
			break;
		case 'mouseout':
			this.style.color='blue';
			break;
		case 'click':
			alert('Has hecho click');
			break;
	}

}

window.onload = function(){
	document.getElementById('evento').onmouseover = controladorEventos;
	document.getElementById('evento').onmouseout = controladorEventos;
	document.getElementById('evento').onclick = controladorEventos;
}
</script>

Como vemos, se trata de otra forma de manejar los eventos, pero por medio de una única función que en nuestro caso se llama controladorEventos y que recibe como argumento el tipo de evento que tiene lugar.

En las líneas 20-22 observamos como llamamos a la función de la forma especial que tienen los manejadores de eventos, y estos envían el argumento con el tipo de evento.

Este argumento es recogido en un objeto llamado evento en la línea 4 y a continuación utilizando type se introduce en un switch para determinar de qué tipo de evento se trata y ejecutar una acción predeterminada.

Información de los eventos de teclado

Hasta ahora hemos visto como el objeto event funciona de forma general, ahora veremos un caso más especifico, el de los eventos de teclado, aunque el resultado de estos eventos puede variar dependiendo del navegador en el que nos encontremos, realizaremos un simple código para poder ver estos resultados.

Vamos a comenzar analizando lo que ocurre al pulsar una tecla de nuestro teclado y a clasificarlas, ya que no todas las teclas son iguales. Hay dos tipos de teclas; aquellas que tienen un valor definido (letras, números y símbolos) y aquellas que son especiales (shift, control, alt…).

Al pulsar una tecla ocurre la siguiente secuencia de eventos:

  • onkeydown: se refiere al hecho de pulsar la tecla
  • onkeypress: la propia pulsación de la tecla
  • onkeyup: cuando se suelta la tecla

De los tres, la mejor forma de obtener información de la tecla es usando onkeypress.

En este ejemplo basado en manual de introducción a JavaScript de Javier Eguíluz Pérez podemos ver como reaccionan los tres eventos y obtener sus resultados:

<div id="info"></div>
<script>
function informacion(elEvento){
	var evento = elEvento;
	var valor = evento.charCode;
	var mensaje = 	"Tipo de evento: " + evento.type + "\n" +
			"propiedad keycode: " + evento.keyCode + "\n" +
			"propiedad charcode: " + valor + "\n" +
			"Carácter pulsado: " + String.fromCharCode(valor);
	info.innerHTML += "-----------------------------" + mensaje;
}

window.onload = function(){
	document.onkeydown = informacion;
	document.onkeypress = informacion;
	document.onkeyup = informacion;
}
</script>

Esto nos ofrece el siguiente resultado al pulsar la tecla m por ejemplo.

—————————–
Tipo de evento: keydown
propiedad keycode: 77
propiedad charcode: 0
Carácter pulsado:
—————————–
Tipo de evento: keypress
propiedad keycode: 0
propiedad charcode: 109
Carácter pulsado: m
—————————–
Tipo de evento: keyup
propiedad keycode: 77
propiedad charcode: 0
Carácter pulsado:

Vemos que hay tres eventos el keydown, el keypress y el keyup y que solo el keypress genera el carácter pulsado.

Si hacemos pruebas con teclas especiales vemos que se repite la propiedad keyCode en los tres eventos  pero no hay valor para charCode.

Os animo a que juguéis un poco con el código y a que veais los resultado pulsando por ejemplo shift o altGr y otra tecla…

Los resultados son curiosos ¿verdad? pues eso es solo el principio, imaginad que cada tipo de teclado de cada país tiene sus propios caracteres, codificaciones…

Lo interesante de este tipo de eventos, así como los de ratón que veremos a continuación es que permiten hacer que la web reaccione a las interacciones del usuario, haciendo que realice acciones, muestre ventanas…

Información de los eventos de ratón

La información de las coordenadas donde se encuentra el ratón puede ser muy relevante, para hacer aparecer popups, hacer que la web reaccione a nuestra lectura…

Para poder calcular las coordenadas se hace tomando como punto 0,0 a la esquina superior derecha, de la ventana del navegador o de la pantalla, según necesitemos y como vamos a ver es muy fácil de controlar tanto una forma como la otra.

El siguiente código nos muestra las coordenadas desde ambas posiciones…

<div id="info">
    <h2>Coordenadas página:<div id="pagina"></div></h2>
    <h2>Coordenadas pantalla:<div id="pantalla"></div></h2>
</div>
<script>
function informacion(elEvento){
	var evento = elEvento;
	var coordenadaX = evento.clientX;
	var coordenadaY = evento.clientY;
	var coordenadaXp = evento.screenX;
	var coordenadaYp = evento.screenY;
	pagina.innerHTML = "[" + coordenadaX + "-" + coordenadaY + "]";
	pantalla.innerHTML = "[" + coordenadaXp + "-" + coordenadaYp + "]";
}

window.onload = function(){
	document.onmousemove = informacion;
}
</script>

Aquí podemos observar como se lanza el evento cada vez que movemos el ratón y de ese modo creamos nuestro objeto event.

A continuación en las líneas 8 y 9 capturamos las coordenadas respecto a la ventana del navegado por medio de clientX y clientY.

Por otro lado en las líneas 10 y 11 las capturamos para la pantalla en general por medio de screenX y screenY

Finalmente las mostramos en pantalla obteniendo el resultado.

Con un poco de imaginación se le puede obtener muchos resultados curiosos a esta información, y de hecho seguro que vemos muchos a lo largo de nuestra navegación sin percatarnos, o sí,  de su existencia, ahora el límite solo lo pone la imaginación, propia o de nuestros clientes…