Eventos II.
Los eventos en JavaScript son muy importantes, ya que nos van a permitir controlar todo lo que ocurre en nuestra página web.
Hemos visto qué es un evento, así como los principales eventos que se producen en nuestras páginas web. Ahora vamos a ver cómo se capturan los eventos ylos principales manejadores de eventos, así como el objeto event, con el que podemos obtener información más detallada a cerca del suceso que se ha producido.
En adelante, veremos algunas propiedades, atributos, métodos.... acompañados de unos iconos indicándonos la excepcionalidad del navegador por el que es reconocido:
Google Chrome.
Internet Explorer.
Netscape, Mozilla.
Opera.
Safari.
Captura de eventos.
Para poder manejar lo que sucede en nuestras páginas necesitaremos de un manejador de los eventos que se producen. lo primero es definir qué suceso queremos controlar. Para ello tenemos varias posibilidades:
En el objeto que queremos capturar el suceso podemos redefinir el evento añadiendole un atributo con el nombre del evento. Puesto que se tratan de etiquetas HTML, en este caso es indiferente que pongamos la captura del evento con mayúsculas o minúsculas. Como valor de dicho atributo se incluirá la sentencia o conjunto de sentencias que se han de ejecutar. Dicha sentecia puede ser una llamada a una función que es la que realiza la lógica a seguir.
<body onload=".....">
<img href="imagen.gi"
onMouseOver="this.width=18; this.border=2"
onMouseOut="this.width=11; this.border=0;">
<div onclick="ejecutaFuncion();"></div>
Como puedes ver, se pueden capturar diferentes eventos para un sólo objeto. En la segunda línea de arriba tienes un ejemplo con la imagen. Si pasas el cursor por encima se agranda y le pone un borde de 2 pixels. Al salir vuelve a su tamaño normal y le quita el borde.
Se puede también asignar una función determinada para un objeto y un evento concretos desde JavaScript, para lo cual primero tendremos que obtener el elemento al que queremos asociar el evento y por último asignárselo. Supongamos que tenemos en nuestra página una parte a la que le hemos asignado un edentificador para poder realizar algo con él:
<span id="pruebaDatos">PROBANDO LOS EVENTOS</span>
Veamos cómo capturaríamos dicho evento mediante JavaScript:
//Obtenemos la parte de nuestra página llamada "pruebaEventos":
var pruebaEventos = document.getElementById("pruebaEventos");
//Le asignamos la función pruebaEvent
// para cuando se hace un click en ella:
if(pruebaEventos) pruebaEventos.onclick = pruebaEvent;
function pruebaEvent() {
alert("En la función");
}
En el script, pruebaEventos es nuestro span con el id pruebaDatos. Antes de asignarle el evento, comprobamos si existe. En la línea pruebaEventos.onclick le decimos que si existe, cuando se haga un click en él ejecute algo, en este caso pruebaEvent, que lo único que hace es mostrar un mensaje diciendo que está en la función. Para ver el resultado, had click en la siguiente línea:
PROBANDO LOS EVENTOS
Otra forma de asignarle una funcionalidad es sin darle nombre a la función, sino simplemente definir la función en la misma línea:
if(pruebaEventos) {
pruebaEventos.onclick = function () {
alert("En la función");
}
}
Existe también la posibilidad de provocar un evento en un objeto cuando otro suceso ocurre. Veamos un ejemplo: si haces click en el botón se muestra un mensaje de alerta. Al cambiar la opción del combo, además de cambiar el color de fondo de este apartado, se mostrará también el mensaje de alerta. El código para conseguir ésto es el siguiente:
<select name="paises" onchange="cambiaColores('pruebaClick');
document.formu.boton.click();">
<input type="button" name="boton" value="botón de prueba"
onclick="alert('clic de prueba')" />
Orden de los eventos.
Existe un problema, y es que como hemos visto, el HTML tiene unos elementos dentro de otros. Suponiendo que tienes un elemento dentro de otro y que ambos hacen un tratamiento diferente para, por ejemplo, el evento onclick, ¿cuál de los dos será tratado primero?.
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------
Pues, desafortunadamente, aquí también nos encontramos con distintas formas de trabajar:
En sus inicios Netscape ya definió que se ejecutará primero el del padre (element1). A esto es a lo que se le conoco como captura de eventos.
Microsoft, sin embargo sostiene que se lance primero el element2. A este proceso se le llama bubbling(burbuja).
Como ves, son dos formas totalmente opuestas. Explorer sólo soporta el bubbling. Mozilla, Opera 7 y Konqueror soportan ambos. Pero las versiones de Opera anteriores a la versión 7 no soporta ninguno.
El modelo W3C ha tomado una posición intermedia, de modo que primero se lanza del padre al hijo y luego del hijo al padre:
| | ⇑
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 ⇓ | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------
Puedes elegir la forma de tratarlo gracias al método addEventListener:
addEventListener(evento, nombreFuncion, b)
En el caso que hemos visto antes, supongamos que tenemos dos manejadores de eventos para cada elemento:
element1.addEventListener('click', eventElement1, true);
element2.addEventListener('click', eventElement2, false);
Si hiciésemos clic en element2, el manejador de eventos miraría si alguno de los elementos padre tiene otro manejador de eventos. Si es así, lo ejecutará (en este caso, pues, ejecutará eventElement1) y a continuación volverá al elemento en el que se produjo el evento click ejecutándose eventElement2. Tras ésto volverá a subir por si algún otro elemento padre también captura y trata el mismo evento.
Esto es la capa
element1
element2
Si tuviésemos:
element1.addEventListener('click', eventElement1, false);
element2.addEventListener('click', eventElement2, false);
Haciendo clic en element2, primero se busca en los elementos padres algún manejador de eventos. No lo encuentra, baja hasta donde se produjo el suceso, ejecuta eventElement2 y cuando termina vuelve a ascender buscando de nuevo si un de sus padres maneja el mismo evento. Entonces es cuando encuentra que element1 tiene asociada la función eventElement1 y la ejecuta.
Esto es la capa
element1
element2
Objeto event.
El objeto event proporciona una serie de propiedades que nos permiten saber qué evento se ha producido, qué parte del documento lo ha lanzado, etc. No obstante, su manejo es muy diferente en los distintos navegadores. Veremos cuáles son estas propiedades según una serie de grandes preguntas :
¿Qué evento se ha producido?.
Es la única propiedad con un valor determinado para todos los navegadores:
type. Tipo de evento (click, mousemove, etc).
¿En qué elemento del HTML se ha producido el evento?.
srcElement. Obtiene el elemento que produjo el evento, y por tanto tendrá las mismas propiedades que el elemento.
target. Obtiene el objeto en el que se ha producido el evento.
Observa cómo según el navegador con el que se trabaje, la manera de capturarlo es diferente, por ello será preciso para que funcione en cualquiera de ellos discriminar cuál de las propiedades reconoce:
function detectarObjeto(e) {
var objOrigen;
if (!e) e = window.event;
if (e.target) objOrigen = e.target;
else if (e.srcElement) objOrigen = e.srcElement;
return objOrigen;
}
currentTarget. Obtiene una referencia al elemento HTML actual cuyo evento se está manejando. Hemos visto cómo cuando nuestro documento es complejo, puede ser que tengamos unos elementos dentro de otros y que ambos capturen el mismo evento, con lo que se ejecutarán los diferentes manejadores. La propiedad target nos devolverá el elemento en cual se ha producido inicialmente el evento. Sin embargo, currentTarget nos da el elemento HTML que se está controlando actualmente.
Veamos un ejemplo. Tenemos dos capas. En las dos se captura el evento onclick y llaman a a la misma función (detectarObjeto2) pasándole el evento producido y el objeto en que se produce (this). El código HTML y el script serían los que siguen:
<div id="capa1" onClick="detectarObjeto2(event, this)">
Esto es la capa 1
<div id="capa2" onClick="detectarObjeto2(event, this)">
Capa 2
</div>
</div>
<script type="text/javascript">
function detectarObjeto2(e, objeto) {
var objOrigen;
if (!e) e = window.event;
if (e.currentTarget) objOrigen = e.currentTarget;
else if (e.srcElement) objOrigen = e.srcElement;
alert("objOrigen=" + objOrigen.id +", objeto=" +
objeto.id);
return objOrigen;
}
</script>
Observa la diferencia entre la función detectarOrbjeto y detectarObjeto2. En la segunda hemos usado currentTarget. Según lo que hemos visto en la propagación de los eventos en elementos que están anidados, si se hace un click en capa2, al estar ésta dentro de capa1, capa1 también captura el evento onclick y, por lo tanto, se ejecutará dos veces la función detectarObjeto2.
Primero, aclarar que en la función detectarObjeto2, objeto es la capa (elemento div del HTML) en el que se ha hecho un clic con el ratón, y objOrigen dependerá del navegador que estés utilizando. Como IE no soporta la propiedad currentTarget, será el mismo que el objeto recibido como segundo parámetro, es decir, si se hace clic en capa2 será capa2. Sin embargo, en Mozilla y Opera, objOrigen será el elemento HTML en el que originariamente se hizo el clic, siendo objOrigen igual qie objeto.
Según el explorador que estés usando, en el mensaje de alerta que se muestra serán diferente. La propiedad currentTarget nos indicará que el suceso ha ocurrido en capa2 aunque objeto.id sea capa1. Por lo tanto, cuando detectarObjeto2 se ejecuta en Mozilla u Opera, el valor de objOrigen.id
¿Qué tecla se ha presionado?.
keyCode. Recupera el valor UniCode de la tecla presionada.
function getValorTecla(evento, campo) {
//Obtenemos el elemento donde vamos a escribir el resultado
var obj = document.getElementById("escribecodigo");
var code; //Variable con el código de la tecla pulsada.
if (!evento) var evento = window.event;
if (evento.keyCode) code = evento.keyCode;
else if (evento.which) code = evento.which;
var character = String.fromCharCode(code);
obj.innerHTML = "carácter: "+character +", código="+code;
}
Además, hay unas propiedades que nos permiten saber si se ha pulsado alguna de las teclas principales sin necesidad de conocer su valor UniCode:
altKey. Boolean true cuando se pulsa la teclas alt.
ctrlKey. Boolean con valor true si se ha pulsado la tecla ctrl.
shiftKey. Boolean true si la tecla presionada es la de las mayúsculas.
¿Qué botón del ratón se ha pulsado?. Cuando capturamos los eventos mousedown o mouseup podemos detectar cuál de los dos ha sido pulsado con las siguientes propiedades:
| Propiedad |
Izquierdo |
Central |
Derecho |
| width |
1 |
2 |
3 |
| button |
0 |
1/4* |
2 |
* Según W3C el valor para el botón central con la propiedad button es de 1 y para Internet Explorer es de 4
Aunque los Macs tienen solamente un botón de ratón, Mozilla da a Ctrl-Tecleo un valor del botón de 2, puesto que la combinación Ctrl-Tecleo también muestra el menú contextual. El iCab todavía no soporta todas las características del botón de ratón y en Opera no se detecta todavía el clic del botón derecho.
No obstante, podremos inferir que se ha presionado el derecho cuando el valor devuelto no es el correspondiente al del botón izquierdo. La siguiente función muestra un mensaje de alerta indicando si se ha pulsado el botón derecho (true) o no (false).
function isBotonDerecho(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert("derecho? " + rightclick);
}
Pulsa un botón del ratón
Determinar la posición del ratón.
Éste es, quizá, el punto más engorroso, pues existen varios pares de características para determinar en qué posición se encuentra el cursor del ratón en cada momento y funcionarán dependiendo del navegador que se esté utilizando.
clientX y clientY.
Posición del ratón en relación con la coordenada X e Y, respectectivamente, en relación a la ventana del navegador. Dan la posición del ratón concerniente a la pantalla entera del usuario. Desafortunadamente esta información es bastante inútil: normalmente no nos interesa sino saber la posición dentro de nuestro documento, no de toda la pantalla, a no ser que se quiera cambiar de posición la ventana del navegador. Para ver mejor qué valores devuelve en el siguiente ejemplo,
Posición del ratón:
layerX y layerY.
Devuelve un valor en píxeles correspondiente a la coordenada horizontal/vertical, respectivamente, en que se encuentra el puntero del ratón relativo al documento actual.
El siguiente ejemplo escribe la coordenada X e Y donde está el ratón. Para ello, mueve el cursor del ratón por encima del siguiente cuadro blanco:
Posición del ratón:
offsetX y offsetY.
Indica las coordenadas X e Y en la que está el ratón en relación con el objeto que recibe el evento.
El siguiente ejemplo veremos la diferencia existente con el anterior. Escribe la coordenada X e Y donde está el ratón, pero sólo teniendo en cuenta el propio recuadro (IE) o bien el texto contenido en él (Opera). Para ello, mueve el cursor del ratón por encima y observa la diferencia cuando sitúas el cursor justo en la esquina superior izquierda para ambos casos:
Posición del ratón:
pageX y pageY.
Indican las coordenadas X e Y en la que está el ratón en relación el cuerpo del documento. El valor para la corrdenad X coincide con dado por el método clientX para otros navegadores; pero el valor no coincide con clientY, ya que éste no tiene en cuenta la parte del documento no visible.
Si tienes Opera, podrás observar la diferencia entre los métodos clientY y pageY.
Veamos una posible solución a todo ésto:
function getPositionRaton(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx y posy tienen la posición X e Y del ratón en
// relación con nuestro documento.
return new Array(posx, posy);
}
Posición del ratón:
returnValue. Se determina si el acontecimiento está cancelado.
cancelBubble. Puede cancelar una burbuja del acontecimiento.
