Rastreador de propagación de eventos
Copia un probe de una sola captura en una página real, reproduce un evento, pega su trace JSON y revisa la ruta de propagación y los puntos de parada. El proceso se ejecuta en tu navegador, sin subir datos.
Rastreador de propagación de eventos
Copia un probe de una sola captura en una página real, reproduce un evento, pega su trace JSON y revisa la ruta de propagación y los puntos de parada. El proceso se ejecuta en tu navegador, sin subir datos.
Cómo leer un trace de propagación de eventos
Sigue capture, target y después bubble
En un evento DOM, los capture listeners se ejecutan desde los ancestros exteriores hacia target. Al llegar a target, los capture listeners registrados en ese nodo se ejecutan antes que sus bubble listeners, aunque ambas observaciones pertenecen a la fase target. Si el evento admite bubble, los bubble listeners se ejecutan después desde target hacia sus ancestros. Leer las observaciones en este orden permite localizar el primer listener que pudo cambiar o cortar la ruta.
Distingue target, currentTarget y composedPath()
target identifica dónde se originó el evento tal como lo ve el listener, mientras que currentTarget identifica el nodo cuyo listener se está ejecutando en esa observación. composedPath() aporta la ruta ordenada de nodos visible desde el contexto actual; en este trace se muestra desde target hacia la raíz. Léela al revés para capture y en el orden mostrado para bubble. Con Shadow DOM, el target visible puede cambiar y la ruta puede omitir el interior de un closed shadow, así que usa la ruta registrada en lugar de asumir la cadena parent del DOM normal.
Localiza la llamada que detuvo la ruta
stopPropagation impide que el evento continúe hacia nodos posteriores. Los demás listeners del mismo currentTarget y de la misma pasada de capture o bubble aún pueden ejecutarse; sin embargo, si se llama desde un capture listener en target, se omite la pasada bubble posterior de target. stopImmediatePropagation también bloquea los listeners pendientes de esa misma pasada en el nodo. El probe de una sola captura registra el método, la fase y el currentTarget donde se llamó a la detención, así que compara ese punto con la última observación en vez de deducirlo solo a partir del código de registro. Después de cambiar el handler, captura de nuevo el mismo evento para confirmar que la ruta llega al ancestro esperado.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿En qué orden se ejecutan los listeners de capture, target y bubble?
Los capture listeners se ejecutan desde los ancestros exteriores hacia target. En target, los capture listeners se ejecutan antes que los bubble listeners, y ambos se registran en la fase target. Si bubbles es true, los bubble listeners se ejecutan después desde target hacia los ancestros. Entre listeners del mismo tipo y nodo se respeta el orden de registro.
¿Por qué mi evento no hace bubble hasta el elemento padre?
Primero comprueba event.bubbles, porque algunos tipos de evento no hacen bubble. Si es true, busca una llamada a stopPropagation o stopImmediatePropagation antes del padre, confirma que el padre esté realmente en composedPath() y revisa si un límite de Shadow DOM o del framework cambia la ruta visible. El trace permite distinguir estos casos al mostrar la ruta, la última observación y cualquier llamada de detención registrada.
¿Qué diferencia hay entre event.target y event.currentTarget?
event.target es el origen del evento expuesto al listener y suele mantenerse igual durante la propagación. event.currentTarget es el nodo cuyo listener se ejecuta en ese momento, por lo que cambia en cada observación. En la delegación de eventos, usa target para identificar el descendiente pulsado y currentTarget para identificar el elemento que contiene el handler.
¿stopPropagation bloquea otros listeners del mismo elemento?
No siempre. Los demás listeners del mismo currentTarget y de la misma pasada de capture o bubble aún pueden ejecutarse. Sin embargo, si un capture listener en target llama a stopPropagation, se omite la pasada bubble posterior de target. stopImmediatePropagation bloquea tanto la propagación posterior como los listeners pendientes de la pasada actual. El probe registra qué método se llamó para no confundir estos casos.
¿Cómo puedo rastrear la propagación de eventos en una página real?
Elige el tipo de evento, copia el probe de una sola captura y ejecútalo en DevTools en la página afectada. Reproduce el evento una vez y pega en esta herramienta el trace JSON generado. Tras la captura, el probe elimina sus listeners y restaura los métodos modificados, no registra más que ese evento y no envía el trace por la red.
¿Qué diferencia hay entre la propagación de eventos y el bucle de eventos?
La propagación de eventos describe por qué nodos viaja un evento DOM y qué listeners de capture, target y bubble pueden ejecutarse en su ruta. El bucle de eventos describe cuándo se ejecuta el trabajo de JavaScript al coordinar la pila de llamadas, las microtareas y las macrotareas. Un clic entra en el bucle de eventos como una tarea; cuando empieza su dispatch, la propagación determina el orden de los listeners dentro de ese evento.