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:
clickmousedownmouseupmouseovermousemovemouseup
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.
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.
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.