Bienvenidos sean a este post, como hemos visto en los casos anteriores cuando una funcion responde a un evento este recibe un objeto que contiene informacion del evento, y si bien estos a su vez tienen sus propios objetos tambien existen un objeto llamado Event que es comun a cada evento, veamos algunas de de sus propiedades y metodos:

Anuncios
  • target, devuelve una referencia al objeto que ha recibido el evento
  • type, devuelve una cadena de caracteres con el nombre del evento
  • preventDefault(), cancela el evento para prevenir que el sistema realice tareas por defecto
  • stopPropagation(), detiene la propagacion del evento a otros elementos, ocasionando que solo el primer elemento reciba el evento

En este caso el objeto Event se envia como un argumento a la funcion y por esto tenemos que declarar un parametro que reciba este valor, si bien el nombre del parametro es irrelevante normalmente se lo define como e o evento, de esta forma el objeto Event se pasa automaticamente cuando se llama a la funcion pero y si nosotros queremos enviar nuestros propios valores junto con este objeto? Aca entra en accion la funcion anonima, esta solo recibe al Event y en su interior podemos llamar a la funcion que se encarga de responder al evento con todos los atributos que necesitemos, aunque tambien tenemos algunos eventos que generan valores unicos que se pasan a la funcion para ser procesados, y estos eventos trabajan con sus propios tipos de objetos que heredan de Event, un ejemplo puede ser los eventos del mouse que envian un objeto MouseEvent, veamos a continuacion algunas sus propiedades:

  • button, devuelve un entero que representa al boton pulsado
  • ctrlKey, devuelve un valor booleano si se ha pulsado la tecla Ctrl durante un evento
  • altKey, idem al anterior pero con la tecla Alt
  • shiftKey, idem al anterior pero con la tecla Shift
  • metKey, idem al anterior pero con la tecla Windows en Windows o Command en Apple
  • clientX, devuelve la coordenada horizontal donde esta ubicado el cursor
  • clientY, idem al anterior pero con la coordenada vertical
  • offsetX, trabaja de forma similar a clientX
  • offsetY, trabaja de forma similar a clientY
  • pageX, trabaja de forma similar a clientX pero tambien incluye el desplazamiento del documento.
  • pageY, trabaja igual a clientY pero tambien incluye el desplazamiento del documento
  • screenX, igual a clientX pero en lugar de hacerlo en referencia al documento lo hace a la pantalla
  • screenY, similar al anterior pero en lugar de devolver la coordenada horizontal devuelve la coordenada vertical en relacion a la pantalla
  • movementX, nos devuelve la diferencia entre la posicion actual y la posicion anterior en el eje horizontal
  • movementY, idem al anterior pero sobre el eje vertical
Anuncios

Para entender un poco mejor especialmente las diferencias entre los eventos de coordenadas X e Y lo veremos con un ejemplo mas adelante, otro ejemplo de generador de eventos es el teclado, hemos visto en este post a keyPress, keyDown y keyUp, al igual que el caso anterior tiene un objeto llamado KeyboardEvent y estas son algunas de sus propiedades:

  • key, devuelve una cadena de caracteres que identifican a la tecla o teclas apretadas durante el evento
  • ctrlKey, devuelve un valor booleano si se ha pulsado la tecla Ctrl durante un evento
  • altKey, idem al anterior pero con la tecla Alt
  • shiftKey, idem al anterior pero con la tecla Shift
  • metKey, idem al anterior pero con la tecla Windows en Windows o Command en Apple
  • repeat, devuelve un valor booleano identificando si el usuario pulsa la tecla repetidamente

De todas las propiedades mencionadas para KeyboardEvent la mas importante es key porque al devolvernos una cadena de caracteres que desencadena el evento de esta forma podremos identificar la tecla que pulsaron, si bien los numeros devuelven solamente numeros en el momento de presionar algunas de las letras siempre se nos devolveran en minusculas (no importa el estado de Caps lock o Bloqueo Mayusculas), ahora vamos a centrarnos en un ejemplo para poder poner en practica todo lo visto:

events.html

<html>
<head>
<script language="javascript">
<!--

document.title="Objeto event";
function agregarEventos(){
	var mouse = document.getElementById("mouse");
	var teclado = document.getElementById("teclado");
	document.addEventListener("click",function(){			
		var texto="Oh no, haz hecho click!";
		cambiarDiv(texto);
		}, false);
	document.addEventListener("keydown",function(e){
		var texto;
		texto=teclado.innerHTML + e.key;
		teclado.innerHTML=texto;
		}, false);
	document.addEventListener("mousemove",function(e){
		var texto;
		texto="clientX: " + e.clientX + "<br>";
		texto=texto + "clientY: " + e.clientY + "<br>";
		texto=texto + "offsetX: " + e.offsetX + "<br>";
		texto=texto + "offsetY: " + e.offsetY + "<br>";
		texto=texto + "screenY: " + e.screenX + "<br>";
		texto=texto + "screenY: " + e.screenY + "<br>";
		mouse.innerHTML=texto;
		}, false);
	}

function cambiarDiv(valor)
{
	var evento = document.getElementById("evento");
	evento.innerHTML=valor;
}
window.addEventListener("load",agregarEventos);
//-->
</script>
</hed>
<body>
<div id="evento">Nada de nada</div>
------------------------
<div id="teclado"></div>
------------------------
<div id="mouse"></div>
</body>
</html>
Anuncios

En este codigo tendremos un codigo HTML bien simple donde utilizaremos tres tags DIV para mostrar los distintos eventos, el primero se llamara evento, el segundo teclado y el tercero mouse, pasemos a nuestro tag SCRIPT en este crearemos una linea para asignar el titulo de nuestro documento por medio de la propiedad title, luego tendremos dos funciones: agregarEventos y cambiarDiv, primero describamos a cambiarDiv, en este caso recibe un argumento el cual lo asignara el elemento identificado como evento en el bloque HTML, primero lo asigna a la variable evento y luego por medio de innerHTML ingresa el nuevo texto, pasemos a la otra funcion, en esta funcion creara dos variables llamadas mouse y teclado a las cuales les asignara los elementos mouse y teclado del bloque HTML respectivamente, veamos el primer bloque de addEventListener:

document.addEventListener("click",function(){			
	var texto="Oh no, haz hecho click!";
	cambiarDiv(texto);
	}, false);

En este caso tenemos un evento click, luego crea una funcion anonima, en la cual creamos una variable llamada texto, le asignamos un mensaje para luego enviarlo a cambiarDiv para que ejecute la instruccion antes comentada cuando describimos a la misma, pasemos al siguiente bloque:

document.addEventListener("keydown",function(e){
	var texto;
	texto=teclado.innerHTML + e.key;
	teclado.innerHTML=texto;
	}, false);

En este bloque usaremos el evento keyDown, creamos una variable llamada texto, la cual tomara el valor contenido en teclado por medio de innerHTML y la agregaremos la tecla presionada por medio de key y usara el objeto e que declaramos al momento de crear la funcion anonima, luego asignaremos este texto final a teclado por medio de innerHTML, pasemos al ultimo bloque:

Anuncios
document.addEventListener("mousemove",function(e){
	var texto;
	texto="clientX: " + e.clientX + "<br>";
	texto=texto + "clientY: " + e.clientY + "<br>";
	texto=texto + "offsetX: " + e.offsetX + "<br>";
	texto=texto + "offsetY: " + e.offsetY + "<br>";
	texto=texto + "screenX: " + e.screenX + "<br>";
	texto=texto + "screenY: " + e.screenY + "<br>";
	mouse.innerHTML=texto;
	}, false);

Parece mas complejo pero es igual al anterior, en este caso creamos primero una variable llamada texto, en ella iremos agregando cada uno de los valores las coordenadas del cursor (clientX, clientY, offsetX, offsetY, screenX, screenY), al igual que en el caso anterior utilizamos el evento informado por medio de la funcion anonima, en este caso mousemove, una vez armado todo en texto se lo pasaremos a la variable mouse la cual lo escribira en el elemento por medio de innerHTML, con esto terminamos la funcion agregarEventos nuestra ultima linea para describir en el tag SCRIPT es:

window.addEventListener("load",agregarEventos);

Esta agrega un evento para la ventana relacionada con la carga de la misma, antiguamente se usaba onLoad que lo vimos en este post, cuando se ejecuta este evento procede ha llamar a agregarEventos, lo cual nos habilita todo lo antes descripto, veamos el siguiente video para ver como funciona todo

Veamos algunos detalles, el primero y mas obvio son las coordenadas, como pueden ver y si lo intuyeron cuando las describimos tanto client como offset son muy similares porque lo hace en base al document, en cambio screen nos dara el valor con respecto a la pantalla y en otras ocasiones sera mas necesario que los otros, nuestro siguiente evento mas interesante es el de teclado, observen como al presionar las letras, estas aparecen correctamente pero la momento de presionar cualquier de las teclas “especiales” nos devuelve el nombre y no la accion, tenganlo en cuenta para transformarlo cuando sea necesaria otra respuesta pero lo bueno es que detecta todas las teclas, por ultimo tenemos el click que simplemente cambio el texto de su div.

Anuncios

En resumen, hoy hemos visto objeto Event, como es, para que se usa, como podemos implementarlo, cuales son sus caracteristicas mas llamativas, un ejemplo donde pudimos ponerlo en practica tres de sus modalidades mas distintas, espero les haya sido util sigueme en Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00