El Modelo de Eventos del DOM 

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.

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.

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.

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.

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

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

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

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