0
Normalmente, los manejadores de eventos requieren información adicional para procesar sus tareas. Si una función por ejemplo se encarga de procesar el evento onclick, quizás necesite saber en que posición estaba el ratón en el momento de pinchar el botón.No obstante, el caso más habitual en el que es necesario conocer información adicional sobre el evento es el de los eventos asociados al teclado. Normalmente, es muy importante conocer la tecla que se ha pulsado, por ejemplo para diferenciar las teclas normales de las teclas especiales (ENTER, tabulador, Alt, Ctrl., etc.).
jаvascript permite obtener información sobre el ratón y el teclado mediante un objeto especial llamado event. Desafortunadamente, los diferentes navegadores presentan diferencias muy notables en el tratamiento de la información sobre los eventos.
La principal diferencia reside en la forma en la que se obtiene el objeto event. Internet Explorer considera que este objeto forma parte del objeto window y el resto de navegadores lo consideran como el único argumento que tienen las funciones manejadoras de eventos.
Aunque es un comportamiento que resulta muy extraño al principio, todos los navegadores modernos excepto Internet Explorer crean mágicamente y de forma automática un argumento que se pasa a la función manejadora, por lo que no es necesario incluirlo en la llamada a la función manejadora. De esta forma, para utilizar este "argumento mágico", sólo es necesario asignarle un nombre, ya que los navegadores lo crean automáticamente.
En resumen, en los navegadores tipo Internet Explorer, el objeto event se obtiene directamente mediante:
var evento = window.event;function manejadorEventos(elEvento) {
var evento = elEvento;
}function manejadorEventos(elEvento) {
var evento = elEvento || window.event;
}Información sobre el evento
La propiedad type indica el tipo de evento producido, lo que es útil cuando una misma función se utiliza para manejar varios eventos:
var tipo = evento.type;Mediante esta propiedad, se puede rehacer de forma más sencilla el ejemplo anterior en el que se resaltaba una sección de contenidos al pasar el ratón por encima:
function resalta(elEvento) {
var evento = elEvento || window.event;
switch(evento.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}
window.onload = function() {
document.getElementById("seccion").onmouseover = resalta;
document.getElementById("seccion").onmouseout = resalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
Sección de contenidos...
</div>Información sobre los eventos de teclado
De todos los eventos disponibles en jаvascript, los eventos relacionados con el teclado son los más incompatibles entre diferentes navegadores y por tanto, los más difíciles de manejar. En primer lugar, existen muchas diferencias entre los navegadores, los teclados y los sistemas operativos de los s, principalmente debido a las diferencias entre idiomas.
Además, existen tres eventos diferentes para las pulsaciones de las teclas (onkeyup, onkeypress y onkeydown). Por último, existen dos tipos de teclas: las teclas normales (como letras, números y símbolos normales) y las teclas especiales (como ENTER, Alt, Shift, etc.)
Cuando un pulsa una tecla normal, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup. El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla; el evento onkeypress es la propia pulsación de la tecla y el evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada.
La forma más sencilla de obtener la información sobre la tecla que se ha pulsado es mediante el evento onkeypress. La información que proporcionan los eventos onkeydown y onkeyup se puede considerar como más técnica, ya que devuelven el código interno de cada tecla y no el carácter que se ha pulsado.
A continuación se incluye una lista con todas las propiedades diferentes de todos los eventos de teclado tanto en Internet Explorer como en el resto de navegadores:
- Evento keydown:
- Mismo comportamiento en todos los navegadores:
- Propiedad keyCode: código interno de la tecla
- Propiedad charCode: no definido
- Mismo comportamiento en todos los navegadores:
- Evento keypress:
- Internet Explorer:
- Propiedad keyCode: el código del carácter de la tecla que se ha pulsado
- Propiedad charCode: no definido
- Resto de navegadores:
- Propiedad keyCode: para las teclas normales, no definido. Para las teclas especiales, el código interno de la tecla.
- Propiedad charCode: para las teclas normales, el código del carácter de la tecla que se ha pulsado. Para las teclas especiales, 0.
- Internet Explorer:
- Evento keyup:
- Mismo comportamiento en todos los navegadores:
- Propiedad keyCode: código interno de la tecla
- Propiedad charCode: no definido
- Mismo comportamiento en todos los navegadores:
Para convertir el código de un carácter (no confundir con el código interno) al carácter que representa la tecla que se ha pulsado, se utiliza la función String.fromCharCode().
A continuación se incluye un script que muestra toda la información sobre los tres eventos de teclado:
window.onload = function() {
document.onkeyup = muestraInformacion;
document.onkeypress = muestraInformacion;
document.onkeydown = muestraInformacion;
}
function muestraInformacion(elEvento) {
var evento = window.event || elEvento;
var mensaje = "Tipo de evento: " + evento.type + "<br>" +
"Propiedad keyCode: " + evento.keyCode + "<br>" +
"Propiedad charCode: " + evento.charCode + "<br>" +
"Carácter pulsado: " + String.fromCharCode(evento.charCode);
info.innerHTML += "<br>--------------------------------------<br>" + mensaje
}
...
<div id="info"></div>Al pulsar la tecla a en el navegador Firefox, se muestra la siguiente sucesión de eventos:
--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 65
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keypress
Propiedad keyCode: 0
Propiedad charCode: 97
## Carácter pulsado: aTipo de evento: keyup
Propiedad keyCode: 65
Propiedad charCode: 0
Carácter pulsado: ?--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 65
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keypress
Propiedad keyCode: 0
Propiedad charCode: 65
## Carácter pulsado: ATipo de evento: keyup
Propiedad keyCode: 65
Propiedad charCode: 0
Carácter pulsado: ?En el evento keypress, el valor de la propiedad charCode varía, ya que el carácter a, no es el mismo que el carácter A. En este caso, el valor de charCode coincide con el código ASCII del carácter pulsado.
Siguiendo en el navegador Firefox, si ahora se pulsa una tecla especial, como por ejemplo el tabulador, se muestra la siguiente información:
--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 9
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keypress
Propiedad keyCode: 9
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keyup
Propiedad keyCode: 9
Propiedad charCode: 0
Carácter pulsado: ?A continuación se muestra el resultado de la ejecución del mismo ejemplo anterior en el navegador Internet Explorer. Al pulsar la tecla a, se obtiene la siguiente información:
--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 65
Propiedad charCode: undefined
## Carácter pulsado: Tipo de evento: keypress
Propiedad keyCode: 97
Propiedad charCode: undefined
## Carácter pulsado: Tipo de evento: keyup
Propiedad keyCode: 65
Propiedad charCode: undefined
Carácter pulsado:Si se pulsa la tecla A, la información mostrada es idéntica a la anterior, salvo que el código que muestra el evento keypress cambia por 65, que es el código ASCII de la tecla A:
--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 65
Propiedad charCode: undefined
## Carácter pulsado: Tipo de evento: keypress
Propiedad keyCode: 65
Propiedad charCode: undefined
## Carácter pulsado: Tipo de evento: keyup
Propiedad keyCode: 65
Propiedad charCode: undefined
Carácter pulsado:--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 9
Propiedad charCode: undefined
Carácter pulsado:Por último, las propiedades altKey, ctrlKey y shiftKey almacenan un valor booleano que indica si alguna de esas teclas estaba pulsada al producirse el evento del teclado. Sorprendentemente, estas tres propiedades funcionan de la misma forma en todos los navegadores:
if(evento.altKey) {
alert('Estaba pulsada la tecla ALT');
}--------------------------------------
Tipo de evento: keydown
Propiedad keyCode: 16
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keydown
Propiedad keyCode: 50
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keypress
Propiedad keyCode: 0
Propiedad charCode: 34
## Carácter pulsado: "Tipo de evento: keyup
Propiedad keyCode: 50
Propiedad charCode: 0
## Carácter pulsado: ?Tipo de evento: keyup
Propiedad keyCode: 16
Propiedad charCode: 0
Carácter pulsado: ?El siguiente código de jаvascript permite obtener de forma correcta en cualquier navegador el carácter correspondiente a la tecla pulsada:
function manejador(elEvento) {
var evento = elEvento || window.event;
var caracter = evento.charCode || evento.keyCode;
alert("El carácter pulsado es: " + String.fromCharCode(caracter));
}
document.onkeypress = manejador;Información sobre los eventos de ratón
La información más relevante sobre los eventos relacionados con el ratón es la de las coordenadas de la posición del puntero del ratón. Aunque el origen de las coordenadas siempre se encuentra en la esquina superior izquierda, el punto que se toma como referencia de las coordenadas puede variar.
De esta forma, es posible obtener la posición del ratón respecto de la pantalla del ordenador, respecto de la ventana del navegador y respecto de la propia página HTML (que se utiliza cuando el ha hecho scroll sobre la página). Las coordenadas más sencillas son las que se refieren a la posición del puntero respecto de la ventana del navegador, que se obtienen mediante las propiedades clientX y clientY:
function muestraInformacion(elEvento) {
var evento = elEvento || window.event;
var coordenadaX = evento.clientX;
var coordenadaY = evento.clientY;
alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY);
}
document.onclick = muestraInformacion;var coordenadaX = evento.screenX;
var coordenadaY = evento.screenY;// Detectar si el navegador es Internet Explorer
var ie = navigator.Agent.toLowerCase().indexOf('msie')!=-1;
if(ie) {
coordenadaX = evento.clientX + document.body.scrollLeft;
coordenadaY = evento.clientY + document.body.scrollTop;
}
else {
coordenadaX = evento.pageX;
coordenadaY = evento.pageY;
}
alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY + " respecto de la página web");La variable ie vale true si el navegador en el que se ejecuta el script es de tipo Internet Explorer (cualquier versión) y vale false en otro caso. Para el resto de navegadores, las coordenadas respecto del origen de la página se obtienen mediante las propiedades pageX y pageY. En el caso de Internet Explorer, se obtienen sumando la posición respecto de la ventana del navegador (clientX, clientY) y el desplazamiento que ha sufrido la página (document.body.scrollLeft, document.body.scrollTop).
Comentarios