El Modelo de Eventos del DOM

Autor Original:Mike Hall URL ORIGINAL :http://www.brainjar.com/dhtml/events/ TITULO ORIGINAL :The DOM Event Model Traducción al castellano:Pedro Palazón Candel URL CASTELLANO :http://kusor.net/traducciones/brainjar.es/events1.es.html

El Modelo de Eventos del DOM

Revisa la documentación oficial W3C DOM2 Event standard .

Eventos del Mouse

Los eventos relacionados con el mouse incluyen:

Para todos estos eventos, la siguiente información adicional es proporcionada por el objeto  Event.

Propiedades de los Eventos del Mouse
Nombre de la Propiedad Descripción
altKey, ctrlKey, metaKey, shiftKey Valores Booleanos. Si son verdaderos = true, la tecla asociada ha sido pulsada cuando se ha disparado el evento.
button Un valor entero indicando qué botón del mouse ha sido presionado o soltado, 1 = izquierdo, 2 = central, 3 = derecho. Un mouse con un sólo botón devolverá solamente 1, un mouse mouse con 2 botones podría devolver tanto 1 como 3.
clientX, clientY Dan las coordenadas en pixels del puntero del mouse relativas al área cliente del navegador, e.d., relativas to the espacio de visualización de la página ('viewport'), donde el evento se ha disparado.
relatedTarget En un mouseover indica el nodo que el mouse ha dejado. En un mouseout indica el nodo al que el mouse ha sido movido.
screenX, screenY Dan las coordenadas en pixels del puntero del mouse relativas a la pantalla cuando se ha disparado el evento.

Como puedes ver, estas propiedades pueden utilizarse para determinar la posición del mouse, qué botones han sido presionados y los elementos sobre los que se ha movido o ha dejado.

Compatibilidad de Navegadores Opera 5 mide incorrectamente clientX y clientY relativas al origen de la página, no al espacio de visualización de la página. En otras palabras, incluye los 'scroll offsets'.

Notas sobre Eventos del Mouse

Los eventos del mouse tienen lugar siempre en el elemento de menor nivel en el árbol del documento. Es decir, el blanco ('target') del evento debe ser el elemento con menor jerarquía en el documento, siutado bajo el mouse cuando el evento ocurre.

Hacer click en un botón del mouse dispara actualmente tres eventos: mousedown, mouseup y click que son procesados en ese orden. El procesamiento es hecho consecutivamente, cada evento debe completar su flujo (o ser detenido) antes deque el siguiente empiece.

Propiedades Específicas de los Navegadores

Netscape 6 añade algunas propiedades adicionales relacionadas con los eventos del  mouse como son layerX, layerY, pageX, pageY y which. Estas propiedades son proporcionadas por compatibilidad hacia atrás con versiones antiguas y no son parte del estándar.

El modelo de eventos de Internet Explorer es de nuevo diferente al del estándar. A continuación hay algunos equivalentes para las propiedades del mouse descritas antes.

Equivalentes de Internet Explorer 
W3C Etándar IE window.event Notas
button button Sigue siendo un valor entero pero el valor del botón es interpretado de forma diferente en IE. 0 = ninguno,
 1 = izquierdo, 2 = derecho,
 3 = izquierdo y derecho, 4 = central,
 5 = izquierdo y central,
 6 = central y derecho,
 7 = izquierdo, central and derecho.
relatedTarget fromElement, toElement Para eventos mouseover y mouseout , indican los elementos que el mouse ha abandonado y sobre el que ha sido puesto respectivamente.

IE proporciona además offsetX y offsetY que son similares a layerX y layerY en Netscape, dando las coordenadas del mouse relativas al elemento blanco. De nuevo, no son parte del estándar.

Eventos de Teclado

El Modelo de Eventos del DOM2 no incluye especificaciones para eventos de teclado. De cualquier modo, el estándar HTML 4 permite los eventos keyup, keydown y keypress  para varios elementos. Ambos, Netscape 6 y IE 5.5, los soportan e incluyen propiedades en el objeto Event que reflejan información sobre cuál o cuáles teclas han sido presionadas.

En Netscape, el valor ASCII de la tecla viene dado por la propiedad charCode en eventos keypress y por la propiedad keyCode para eventos keydown y keyup.

Internet Explorer almacena el valor Unicode de la tecla en la propiedad keyCode para los tres eventos.

En ambos, los eventos keydown y keyup se disparan cuando cualquier tecla modificadora es presionada, como ALT, CTRL y SHIFT. El evento keypress puede utilizarse en lugar de capturar combinaciones como SHIFT-A.

Algunos ejemplos de combinaciones con los valores de las propiedades relevantes para cada tipode evento de teclado se muestran debajo, clasificadas por navegador.

IE Ejemplos de Eventos de Teclado
Tecla(s) keydown keyup keypress
A keyCode=65 keyCode=65 keyCode=97
SHIFT keycode=16, shiftKey=true keycode=16, shiftKey=false n/a
SHIFT-A Cualquiera de de las teclas que sea presionada primero dispara el evento. Cualquiera de las teclas que se suelte la última dispara el evento. keycode=65, shiftKey=true
Z keyCode=90 keyCode=90 keyCode=122
CTRL keycode=17, ctrlKey=true keycode=17, ctrlKey=false n/a
CTRL-Z Cualquiera de de las teclas que sea presionada primero dispara el evento. Cualquiera de las teclas que se suelte la última dispara el evento. keycode=26, ctrlKey=true
Netscape Ejemplos de Eventos de Teclado
Key(s) keydown keyup keypress
A charCode=0, keyCode=65, which=65 charCode=0, keyCode=65, which=65 charCode=97, keyCode=0, which=97
SHIFT charCode=0, keycode=16, shiftKey=true charCode=0, keycode=16, shiftKey=false n/a
SHIFT-A Cualquiera de de las teclas que sea presionada primero dispara el evento. Se disparan eventos separados para cada tecla, shiftKey=true para la tecla A. charCode=65, keycode=0, which=65, shiftKey=false (si, falso)
Z charCode=0, keyCode=90, which=90 charCode=0, keyCode=90, which=90 charCode=122, keyCode=0, which=122
CTRL charCode=0, keycode=17, ctrlKey=true charCode=0, keycode=17, ctrlKey=false n/a
CTRL-Z Cualquiera de de las teclas que sea presionada primero dispara el evento. Se disparan eventos separados para cada tecla, ctrlKey=true para la tecla Z. charCode=122, keycode=0, which=122, ctrlKey=true

Como puedes ver, los dos navegadores se diferencian bastante en cómo manipulan los eventos de teclado. Nótese, además, que algunas combinaciones de teclas están reservadas por el navegador o por el sistema operativo para atajos en los comandos o controles. Dependiendo del navegador y la plataforma, podrás o no capturarlas.

Previo | Siguiente

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.
Valid XHTML |Valid CSS