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 recomendación oficial W3C DOM2 Event standard .

Manipulando Eventos

Con docenas de eventos diferentes disparándose constantemente,  subiendo y bajando por el árbol del  documento, la estrategia real para usar manejadores de eventos ('event handlers') está en calcular qué evento capturar, dónde agregar el manejador y cómo  procesarlo.

Algunas veces las respuestas son obvias y otras no tanto. Para demostrarlo, vamos a ver un efecto particular y ver cómo implementarlo usando manejadores de eventos.

Ejemplo del uso de Eventos del Mouse

Supongamos que quieres crear un "pop up menu" como el de la derecha. Consiste en una etiqueta DIV con varias etiquetas A para los items individuales. Los estilos CSS se han utilizado para administrar el aspecto incluyendo un efecto "hover" sobre los items.

El efecto hover podría haberse hecho usando eventos pero ¿porqué complicar las cosas cuando en CSS la pseudo-clase :hover hace el trabajo? Además, vamos a usar los eventos para manejar el mostrar y ocultar el menú.

Aquí están los códigos CSS y HTML:

.menu {
background-color: #40a0c0;
border-color: #80e0ff #006080 #006080 #80e0ff;
border-style: solid;
border-width: 2px;
position: absolute;
left: 0px;
top: 0px;
visibility: hidden;
}

a.menuItem {
color: #ffffff;
cursor: default;
display: block;
font-family: MS Sans Serif, Arial, Tahoma,sans-serif;
font-size: 8pt;
font-weight: bold;
padding: 2px 12px 2px 8px;
text-decoration: none;
}

a.menuItem:hover {
background-color: #004060;
color: #ffff00;
}

...

<div id="menuId" class="menu">
<a class="menuItem" href="blank.html">Menu Item 1</a>
<a class="menuItem" href="blank.html">Menu Item 2</a>
<a class="menuItem" href="blank.html">Menu Item 3</a>
<a class="menuItem" href="blank.html">Menu Item 4</a>
<a class="menuItem" href="blank.html">Menu Item 5</a>
</div>

Digamos que queremos hacer que el menú aparezca bajo el cursor cuando el usuario haga click en un link en particular. Instalamos una función llamada openMenu() y agregamos un manejador onclick sobre la etiqueta A como este:

<a href=""
onclick="openMenu(event, 'menuId'");return false;">Open Menu</a>

Fíjate que la función openMenu() espera dos argumentos, un objeto Event y el ID de la capa del menú (etiqueta DIV) a mostrar. Recuerda que el valor de la cadena del atributo ONCLICK es utilizado aquí para crear una función anónima que, en este caso, podría ser algo similar a esto,

function anonymous(event) {
openMenu(event, 'menuId');
return false;
}

con el id de la etiqueta DIV del menú "hard-coded". Por lo tanto, el manejador tendrá solamente un argumento, event, como todos los manejadores de eventos hacen. Devolviendo false vamos a prevenir la acción por defecto del navegador de seguir el link.

Aquí está la función openMenu():

function openMenu(event, id) {

var el, x, y;

el = document.getElementById(id);
if (window.event) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
else {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
x -= 2; y -= 2;
el.style.left = x + "px";
el.style.top = y + "px";
el.style.visibility = "visible";
}


Básicamente,posiciona la capa DIV del menú bajo el cursor
y la hace visible. El posicionamiento es un poco complicado porque se necesitan
métodos diferentes para determinar la posición del cursor basándonos
en el navegador.

Internet Explorer Para IE, el código de arriba agrega los valores de "scroll offset" para las etiquetas HTML  (representada por document.documentElement ) y BODY (representada por document.body). Ésto se debe a que IE 5.5 utiliza BODY como base para el renderizado y la medición de los "offsets", tal como hace IE 6 cuando está en modo compatible ("compatibility mode"). Pero en modo  "standards-compliant" IE 6 usa en su lugar la etiqueta HTML como base. Afortunadamente, independientemente de cúal esté siendo utilizado, el otro va a tener fijado un valor cero. Por tanto, añadiéndolos juntos obtendremos el "scroll offset" apropiado en cualquier situación.

A continuación, queremos que el menú desaparezca cuando el usuario mueva el mouse fuera del menú. Ésto se hace asignando un manejador de eventos a la etiqueta DIV del menú para llamar la función closeMenu().

document.getElementById("menuId").onmouseout = closeMenu;

function closeMenu(event) {

this.style.visibility = "hidden";
}

Todo lo que hace esta función es volver a fijar la visibilidad (visibility) de la etiqueta DIV del menú en hidden.

Ahora vamos a probarlo, usando el link de abajo.

Abrir Menu

En lo primero que tienes que fijarte es que el menú desaparece tan pronto como mueves el mouse, incluso si intentas mantener el puntero dentro de la etiqueta DIV del menú. ¿Porqué?

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