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 .

Captura de Eventos

Puedes atrapar también los eventos durante la fase de captura usando el escuchador de eventos detallado  previamente. La fase de captura complementa a la de burbujeo. La fase de captura ocurre antes. El evento fluye hacia abajo desde la raíz del  árbol del documento hasta el elemento objetivo ('target') del evento y, entonces, vuelve a burbujear hacia arriba, (en sentido contrario).

En esta fase, los elementos exteriores recibirán el evento antes de que éste alcance su blanco. Ésto puede resultar útil si quieres interceptar un evento para algún elemento incluso si este había sido inicialmente destinado a uno de sus hijos o cualquiera otros  descendientes.

Compatibilidad de Navegadores Como se mencionó anteriormente, sólo Netscape 6 implementa la interfaz Event Listener. Internet Explore soporta una funcionalidad similar para los eventos del mouse vía sus métodos setCapture() y releaseCapture(). Mira la Documentación de Microsoft para los detalles.

Deberíamos reparar en que el término "event capture" se usa con frecuencia a la ligera para describir el hecho de fijar un escuchador de eventos o un manejador de eventos, durante cualquiera de las fases. Aquí significa especificamente que estamos interceptando un evento durante la fase de bajada ('downward') del flujo de eventos, antes de que alcance su blanco predeterminado.

Ejemplo de flujo de Eventos

El proceso completo puede ser ilustrado con una demo. Abajo hay una serie de etiquetas  DIV jerarquizadas. El evento onclick es atrapado por cada elemento en ambas fases,  captura,(si es soportada por el navegador) y burbujeo. Haz click en cualquier parte de las cajas y la ruta del evento será trazado en la caja de texto que tienen debajo.

DIV A
DIV B
DIV C

Haciendo click en el elemento DIV más interno, se dispararán seis manejadores de eventos, tres bajando en el árbol del documento y otros tres cuando se burbujee hacia arriba. En este ejemplo, se utiliza la misma función para los seis, pero cada uno podría tener asignada una función distinta que manejase el evento.

En este trazado, el elemento "Target" es áquel en el que el evento se ha iniciado mientras que el elemento "Current" - actual -  es áquel al que ha sido asignado el escuchador de eventos. Ambos valores son obtenidos usando el objeto Event object pasado como parámetro al manejador.

Netscape 6.0 parece tener un bug. Si haces click en el texto interior de cualquier DIV de las anteriores en lugar de en el área vacía, el evento no es atrapado en la fase de captura, y sólamente se atrapa en la de burbujeo. Dicho bug está corregido a partir de la versión 6.1.

Debería precisarse que éste flujo de eventos ocurre para todos los eventos tanto si has fijado manejadores de eventos para ellos, como si no lo has hecho. Por ejemplo, si quieres atrapar un evento onclick en cualquier parte de una página, no necesitas asignar un manejador para .onclick para todos los elementos. Puedes fijarlo solamente para el objeto document y se ejecutará cuando dicho evento burbujee hacia arriba desde cualquier objeto de la página, o capturarlo antes de que alcance a cualquier elemento.

Ahora que has comprendido cómo fluyen los eventos y sabes cómo capturarlos, ¿qué puedes hacer con ellos?

El Objeto Event

Dentro de un escuchador de eventos, puedes hacer prácticamente cualquier cosa que quieras con el código de tu script. Tienes posibilidades de predefinir alguna acción relacionada con el evento dependiendo de uno o más factores.

Recalcar que a los manejadores de eventos hay que pasarles un argumento, un objeto Event. Este objeto nos proporciona varias propiedades describiendo el evento y su estado actual. Puedes utilizarlas para determinar dónde se ha originado un evento y dónde se encuentra actualmente en el flujo de eventos. O utilizar los métodos que proporciona para  detener el flujo del evento y/o cancelarlo.

Propiedades y Métodos del objeto Event
Nombre de la Propiedad Descrición
bubbles Valor Booleano indicando si el evento burbujea o no.
cancelable Valor Booleano indicando si el evento puede o no ser cancelado.
currentTarget El nodo al que este manejador de eventos está asignado.
eventPhase Un valor entero indicando qué fase del flujo de eventos está siendo procesada para este evento. Uno de entre CAPTURING_PHASE (1), AT_TARGET (2) o BUBBLING_PHASE (3).
target El nodo que ha originado el evento.
timeStamp El momento en el que el evento ha sido originado.
type Una cadena indicando el tipo del evento, como "mouseover", "click", etc.
Nombre del Método Descripción
preventDefault() Puede utilizarse para cancelar el evento, si es cancelable. Esto previene al navegador de realizar cualquier acción por defecto para el evento, como cargar una URL cuando se hace click en un enlace de hipertexto. Nótese que el evento continuará propagándose a través de su flujo normal.
stopPropagation() Detiene el flujo de eventos. Puede utilizarse tanto en la fase de burbujeo cómo en la de captura.

Nótese que el uso de preventDefault() o stopPropagation() afectará sólo a la actual instancia activa de un evento.

Internet Explorer

Como se ha mencionado con anterioridad, IE no soporta actualmente el modelo de Eventos del W3C. En lugar de pasarle un objeto Event a una función manejadora, proporciona un único, objeto global llamado window.event que contiene la mayor parte de la información a la que hacíamos referencia.

Desafortunadamente, los nombres de las propiedades definidas para este objeto no siguen el modelo estándar. A continuación hay una tabla de propiedades equivalentes en estos dos modelos.

Equivalentes en Internet Explorer 
W3C Estándar IE window.event Notas
currentTarget ninguno Ver más abajo.
eventPhase ninguno No aplicable en IE.
target srcElement El nodo en el que el evento ha sido originado.
timeStamp ninguno No disponible en IE.
type type Equivalente al estándar.
preventDefault() returnValue Fijar false para cancelar cualquier acción por defecto para el evento.
stopPropagation() cancelBubble Fijar true para prevenir el burbujeo del evento.

Para obtener el equivalente de la propiedad currentTarget en IE, utilizamos la palabra reservada this como un argumento cuando fijamos el manejador de eventos para una etiqueta.

<a href="..." onmouseover="myHandler(event, this);">...</a>

function myHandler(event, link) {
...
}

Nótese que cancelBubble y returnValue son propiedades Booleanas, no llamadas a métodos. Fijándoles el valor apropiado tendríamos el equivalente a llamar a stopPropagation() o preventDefault() respectivamente.

Estas propiedades son comunes a todos los tipos de eventos. Algunas propiedades adicionales se encuentran disponibles para eventos específicos relacionados con el mouse y el teclado.

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