Con la aparición de Netscape Navigator 4.0, se introdujo un nuevo modelo de manejo de eventos mucho más potente que el que se venía usando anteriormente, dotando a las páginas html de mayor dinamismo y haciéndolas más vistosas. Se incluyeron nuevos eventos, un objeto event y la posiblidad de capturar y manejar eventos antes de que alcancen el objetivo hacia el que se lanzaron.
1.1 El objeto event
Las aplicaciones JavaScript no hacen más que manejar los eventos que el usuario va provocando.
Cada uno de estos eventos, genera la creación de un objeto del tipo event que posee algunas
características propias como el tipo de evento del que se trata o la localización del sitio donde
ocurrió el evento.
Cada evento se envía como un argumento de un manejador de eventos.
Normalmente, el objeto en el que se genera el evento es el encargado de manejarlo,
sin embargo, tal vez el usuario desee que el objeto window o el objeto document
maneje ciertos eventos, que en circunstancias normales no les llegarían.
El nuevo modelo de eventos de JavaScript, permite definir métodos que
capturan y manejan eventos antes incluso de que el objeto en el que se ha
provocado, se entere de que está ocurriendo.
La base de este modelo es el objeto event, que contiene todas las propiedades
que describen un evento en JavaScript y que es pasado a cada manejador de eventos
cuando se produce algún evento. Por ejemplo, si se procuce un evento MouseDown,
su objeto event asociado contendrá el tipo de evento asociado (en este caso
"MouseDown"), la posición x e y del cursor cuando se produjo el
evento, un número representando el botón del ratón que se usó y un registro de las
teclas modificadoras (Control, Alt, Meta o Shift) que estaban pulsadas cuando se produjo
el evento. Las propiedades asociadas a un objeto event varían segun el tipo de
evento que se vayan a manejar. Una descripción más detallada de cada evento
se verá en la siguiente sección.
1.2 Detalles del objeto event
1.2.1 Sintaxis
event.nombrePropiedad
1.2.2 Argumento de
Todos los manejadores de eventos.
1.3 Propiedades
A continuación se describen todas las posibles propiedades que puede tener un evento.
Cada tipo de evento usará algunas o todas ellas.
| Propiedad | Descripción |
| type | Una cadena de texto indicando el tipo del evento. |
| target | Una cadena de texto indicando el objeto al que se ha enviado el evento. |
| layerX | Un número que especifica bien la anchura del objeto cuando es pasado con el evento resize o la posición horizontal del cursor en pixels relativa al layer en el que ha ocurrido el evento. layerX es igual que x. |
| layerY | Un número que especifica bien la altura del objeto cuando es pasado con el evento resize o la posición vertical del cursor en pixels relativa al layer en el que ha ocurrido el evento. layerY es igual que y. |
| pageX | Un número que especifica la posición horizontal del cursor en pixels relativa a la página. |
| pageY | Un número que especifica la posición vertical del cursor en pixels relativa a la página. |
| screenX | Un número que especifica la posición horizontal del cursor en pixels relativa a la pantalla. |
| screenY | Un número que especifica la posición vertical del cursor en pixels relativa a la pantalla. |
| which | Un número que especifica el botón del ratón que ha sido pulsado o bien el valor ASCII de la tecla que ha sido pulsada. |
| modifiers | Una cadena de texto que contiene las teclas modificadoras asociadas con un evento de ratón o de teclado. Los valores válidos son ALT_MASK, CONTROL_MASK, SHIFT_MASK y META_MASK. |
| data | Retorna un array de cadenas de texto que contienen las URLs de los objetos "soltados". Se pasa con el evento dragDrop. |
<script language="JavaScript1.2">
function fun(e) {
alert ("Se ha capturado un evento del tipo: " + e.type);
alert ("La posición x es " + e.layerX);
alert ("La posición y es " + e.layerY);
if (e.modifiers && Event.ALT_MASK)
alert ("La tecla ALT estaba pulsada cuando se produjo el evento.");
return true;
}
document.onMouseDown = fun;
</script>
Pulsa aquí para ejecutar el ejemploCon el nuevo modelo de eventos se puede hacer que una ventana o un documento capture ciertos eventos antes de que alcancen su objetivo final. Para facilitar esta tarea, los objetos window, document y layer disponen de los siguientes métodos:
1.4.1 Funciones Relacionadas
Por ejemplo, si se quieren capturar todos los eventos del tipo click que ocurran en una ventana, primero hay que indicárselo a la ventana:
window.captureEvents(Event.CLICK);
El argumento de captureEvents es una propiedad del objeto event que indica el tipo de evento que se desea capturar. Para capturar más de un evento se usa el operador or ( | ). Por ejemplo:
window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP );
Una vez hecho esto, hay que definir una función que maneje los eventos que se van a capturar:
function clickHandler(e) {
// Codigo para hacer lo que se desee cuando se pulse el raton
}
El argumento e es el objeto event generado por el evento.
Hay cuatro formas posibles de manejar un evento:
funtion clickHandler(e) {
return true;
}
funtion clickHandler(e) {
return false;
}
funtion clickHandler(e) {
var retVal = routeEvent(e);
if (retVal == false) return false;
else return true;
}
funtion clickHandler(e) {
window.document.links[0].handleEvent(e);
}
Como el objeto link dispone del manejador onClick, dicho objeto manejará todos los eventos del tipo click que reciba.
window.onClick = clickHandler;
<html>
<script language="JavaScript1.2">
function fun1(e) {
alert ("La ventana ha capturado un evento del tipo: " + e.type +
" y va a llamar a routeEvent.");
window.routeEvent(e);
alert ("La ventana a terminado de enrutar el evento.");
return true;
}
function fun2(e) {
alert ( "El documento ha capturado un evento del tipo: " + e.type);
return false;
}
window.captureEvents(Event.MOUSEDOWN);
document.captureEvents(Event.MOUSEDOWN);
window.onMouseDown = fun1;
document.onMouseDown = fun2;
</script>
...
</html>
Pulsa aquí para ejecutar el ejemplo