Saltar la navegación

Captura de eventos

Una forma alternativa para la propagación de eventos es la captura de eventos (_event capture_, en inglés). Esta es parecida al bubbling pero el sentido está invertido: en vez de que el evento se lance primero en el elemento objetivo más anidado y, sucesivamente, en elementos menos anidados, el evento se lanza primero en el elemento _menos anidado_, y luego en los elementos más anidados, hasta que el objetivo es alcanzado.

La captura de eventos está desactivada por defecto. Para activarla debes pasar la opción capture al método addEventListener().

Este ejemplo es parecido al ejemplo de burbujeo que vimos anteriormente, a excepción de que ahora hemos usado la opción capture:

Ver Resultado

En este caso, el orden de los mensajes está invertido: el manejador de evento del <body> se lanza primero, seguido del manejador del <div> y por el último el manejador del <button>:

¿Por qué molestarse con ambos métodos, captura y burbujeo? En los malos viejos tiempos, cuando los navegadores eran mucho menos compatibles entre sí, Netscape utilizaba solamente captura de eventos, mientras que Internet Explorer solo usaba burbujeo de eventos. Cuando W3C decidió tratar de estandarizar este comportamiento y llegar a un acuerdo, terminaron con este sistema que incluye ambos métodos, el cual está implementado por los navegadores modernos.

Por defecto, casi todos los manejadores de eventos están registrados en la fase de burbujeo, lo cual tiene sentido la mayoría de veces.