Ir al contenido principal

Event bubbling y capturing

Introducción

En los artículos anteriores hemos aprendido sobre los diferentes tipos de eventos en JavaScript y cómo añadir y eliminar event listeners. Ahora vamos a profundizar en un aspecto fundamental del sistema de eventos: la propagación de los mismos a través del DOM, específicamente los mecanismos de "bubbling" (burbujeo) y "capturing" (captura).

Comprender cómo se propagan los eventos en JavaScript es esencial para crear interfaces interactivas complejas, implementar patrones como la delegación de eventos y resolver problemas comunes relacionados con la gestión de eventos. En este artículo, explicaremos en detalle estos mecanismos y cómo podemos controlarlos para crear aplicaciones web más eficientes.

Fases de propagación de eventos

Cuando ocurre un evento en un elemento del DOM (por ejemplo, un clic en un botón), este evento no afecta solo al elemento donde se originó, sino que pasa por tres fases distintas:

  1. Fase de captura: El evento desciende desde el elemento raíz (window, document) hasta el elemento objetivo.
  2. Fase objetivo: El evento llega al elemento donde se originó.
  3. Fase de burbujeo: El evento asciende desde el elemento objetivo de vuelta hasta el elemento raíz.

Esta propagación permite que varios elementos tengan la oportunidad de responder a un único evento.

Visualización de las fases

Imaginemos una estructura HTML con elementos anidados:

<div id="abuelo">
  <div id="padre">
    <button id="hijo">Haz clic aquí</button>
  </div>
</div>

Si hacemos clic en el botón "hijo", el evento pasará por estas fases:

  1. Captura: window → document → html → body → abuelo → padre → hijo
  2. Objetivo: hijo
  3. Burbujeo: hijo → padre → abuelo → body → html → document → window

Bubbling (propagación ascendente)

El "bubbling" o burbujeo es la fase en la que el evento se propaga desde el elemento donde se originó hacia arriba, a través de sus ancestros, hasta la raíz del documento.

Ejemplo básico de bubbling

// Estructura HTML:
// <div id="externo">
//   <div id="intermedio">
//     <button id="interno">Haz clic</button>
//   </div>
// </div>

document.getElementById('externo').addEventListener('click', function() {
  console.log('Clic en elemento externo');
});

document.getElementById('intermedio').addEventListener('click', function() {
  console.log('Clic en elemento intermedio');
});

document.getElementById('interno').addEventListener('click', function() {
  console.log('Clic en elemento interno (botón)');
});

// Si hacemos clic en el botón, veremos en la consola:
// 1. "Clic en elemento interno (botón)"
// 2. "Clic en elemento intermedio"
// 3. "Clic en elemento externo"

Comportamiento por defecto

Por defecto, addEventListener registra los listeners para la fase de burbujeo. Esto significa que el evento se captura primero en el elemento objetivo y luego asciende a través de sus ancestros.

Capturing (propagación descendente)

El "capturing" o captura es la fase en la que el evento desciende desde la raíz del documento hasta el elemento donde se originó. Esta fase ocurre antes que la fase de burbujeo.

Activación del modo captura

Para registrar un listener en la fase de captura, debemos establecer el tercer parámetro de addEventListener a true o a un objeto con la propiedad capture: true:

elemento.addEventListener('click', miFuncion, true); // Sintaxis antigua
elemento.addEventListener('click', miFuncion, { capture: true }); // Sintaxis moderna

Ejemplo de capturing

document.getElementById('externo').addEventListener('click', function() {
  console.log('Captura en elemento externo');
}, true);

document.getElementById('intermedio').addEventListener('click', function() {
  console.log('Captura en elemento intermedio');
}, true);

document.getElementById('interno').addEventListener('click', function() {
  console.log('Captura en elemento interno (botón)');
}, true);

// Si hacemos clic en el botón, veremos en la consola:
// 1. "Captura en elemento externo"
// 2. "Captura en elemento intermedio"
// 3. "Captura en elemento interno (botón)"

Combinación de bubbling y capturing

Podemos tener listeners tanto en fase de captura como de burbujeo en los mismos elementos:

// Fase de captura (descendente)
document.getElementById('externo').addEventListener('click', function() {
  console.log('1. Captura en elemento externo');
}, true);

document.getElementById('intermedio').addEventListener('click', function() {
  console.log('2. Captura en elemento intermedio');
}, true);

document.getElementById('interno').addEventListener('click', function() {
  console.log('3. Captura en elemento interno');
}, true);

// Fase de burbujeo (ascendente)
document.getElementById('interno').addEventListener('click', function() {
  console.log('4. Burbujeo en elemento interno');
});

document.getElementById('intermedio').addEventListener('click', function() {
  console.log('5. Burbujeo en elemento intermedio');
});

document.getElementById('externo').addEventListener('click', function() {
  console.log('6. Burbujeo en elemento externo');
});

// Si hacemos clic en el botón, veremos en la consola:
// 1. "Captura en elemento externo"
// 2. "Captura en elemento intermedio"
// 3. "Captura en elemento interno"
// 4. "Burbujeo en elemento interno"
// 5. "Burbujeo en elemento intermedio"
// 6. "Burbujeo en elemento externo"

Método stopPropagation()

El método stopPropagation() permite detener la propagación del evento en cualquier punto de su recorrido, evitando que continúe en la fase actual (captura o burbujeo).

document.getElementById('intermedio').addEventListener('click', function(e) {
  console.log('Clic en elemento intermedio');
  e.stopPropagation(); // Detiene la propagación
});

document.getElementById('externo').addEventListener('click', function() {
  console.log('Este mensaje no se mostrará si se hace clic en elemento intermedio');
});

// Si hacemos clic en "intermedio", el evento no llegará a "externo"

Casos de uso para stopPropagation()

  1. Evitar que un clic dentro de un modal cierre el modal:
modalContenido.addEventListener('click', function(e) {
  e.stopPropagation();
});

modal.addEventListener('click', function() {
  cerrarModal();
});
  1. Prevenir comportamientos no deseados en menús anidados:
submenu.addEventListener('click', function(e) {
  e.stopPropagation();
  // Lógica específica del submenú
});

menu.addEventListener('click', function() {
  // Lógica general del menú que no debe ejecutarse para clics en el submenú
});

Método stopImmediatePropagation()

El método stopImmediatePropagation() no solo detiene la propagación hacia otros elementos, sino que también impide que se ejecuten otros listeners registrados en el mismo elemento para el mismo evento.

const boton = document.getElementById('boton');

boton.addEventListener('click', function(e) {
  console.log('Primer listener');
  e.stopImmediatePropagation();
});

boton.addEventListener('click', function() {
  console.log('Segundo listener - este NO se ejecutará');
});

boton.addEventListener('click', function() {
  console.log('Tercer listener - este tampoco se ejecutará');
});

// Al hacer clic solo veremos: "Primer listener"

Diferencia entre stopPropagation() y stopImmediatePropagation()

const boton = document.getElementById('boton');

// Con stopPropagation
boton.addEventListener('click', function(e) {
  console.log('Primer listener');
  e.stopPropagation(); // Esto NO afecta a otros listeners del mismo elemento
});

boton.addEventListener('click', function() {
  console.log('Segundo listener - este SÍ se ejecutará');
});

// Con stopImmediatePropagation
const boton2 = document.getElementById('boton2');

boton2.addEventListener('click', function(e) {
  console.log('Primer listener del segundo botón');
  e.stopImmediatePropagation(); // Esto DETIENE otros listeners del mismo elemento
});

boton2.addEventListener('click', function() {
  console.log('Segundo listener del segundo botón - este NO se ejecutará');
});

Delegación de eventos

La delegación de eventos es un patrón basado en el burbujeo que permite manejar eventos para múltiples elementos con un solo listener. Es especialmente útil para:

  1. Elementos que se crean dinámicamente
  2. Listas o tablas con muchos elementos
  3. Mejorar el rendimiento reduciendo el número de event listeners

Conceptos básicos de delegación

En lugar de asignar listeners a cada elemento, asignamos un único listener a un ancestro común y determinamos el elemento específico que originó el evento mediante event.target.

// En lugar de esto (ineficiente para muchos elementos):
document.querySelectorAll('.item').forEach(function(item) {
  item.addEventListener('click', function() {
    console.log('Clic en item:', this.textContent);
  });
});

// Usamos delegación (mucho más eficiente):
document.getElementById('lista').addEventListener('click', function(e) {
  // Comprobamos si el clic fue en un elemento .item
  if (e.target.classList.contains('item')) {
    console.log('Clic en item (delegado):', e.target.textContent);
  }
});

Ejemplo práctico: lista de tareas

<ul id="tareas">
  <li class="tarea">Comprar leche <button class="eliminar">X</button></li>
  <li class="tarea">Hacer ejercicio <button class="eliminar">X</button></li>
  <li class="tarea">Estudiar JavaScript <button class="eliminar">X</button></li>
  <!-- Más tareas se añadirán dinámicamente -->
</ul>

const listaTareas = document.getElementById('tareas');

// Un solo listener para toda la lista
listaTareas.addEventListener('click', function(e) {
  // Si se hace clic en un botón de eliminar
  if (e.target.classList.contains('eliminar')) {
    // Obtenemos el elemento li (tarea) que contiene el botón
    const tarea = e.target.parentElement;
    console.log('Eliminando tarea:', tarea.textContent);
    tarea.remove();
  }
  // Si se hace clic en una tarea (pero no en el botón)
  else if (e.target.classList.contains('tarea')) {
    console.log('Tarea seleccionada:', e.target.textContent);
    e.target.classList.toggle('completada');
  }
});

// Función para añadir nuevas tareas
function agregarTarea(textoTarea) {
  const nuevaTarea = document.createElement('li');
  nuevaTarea.className = 'tarea';
  nuevaTarea.innerHTML = textoTarea + ' <button class="eliminar">X</button>';
  listaTareas.appendChild(nuevaTarea);
}

// Las nuevas tareas funcionarán automáticamente con el mismo listener
agregarTarea('Llamar al dentista');

Ventajas de la delegación de eventos

  1. Menos listeners = mejor rendimiento y menos uso de memoria
  2. Manejo dinámico de elementos que no existían al cargar la página
  3. Código más limpio y mantenible
  4. Menor riesgo de fugas de memoria (memory leaks)

Encontrar el elemento correcto en la delegación

A veces, el elemento que genera el evento (e.target) puede estar anidado dentro del elemento que realmente nos interesa. Para manejar esto, podemos usar el método closest():

document.getElementById('tabla').addEventListener('click', function(e) {
  // Buscar el elemento tr más cercano
  const fila = e.target.closest('tr');
  
  if (fila) {
    console.log('Fila seleccionada:', fila.dataset.id);
    
    // Podemos determinar qué celda se hizo clic
    if (e.target.classList.contains('editar')) {
      console.log('Botón editar en fila:', fila.dataset.id);
    } else if (e.target.classList.contains('eliminar')) {
      console.log('Botón eliminar en fila:', fila.dataset.id);
    }
  }
});

Eventos que no se propagan

Es importante tener en cuenta que no todos los eventos se propagan a través del DOM. Algunos eventos, por su naturaleza, solo ocurren en elementos específicos y no pasan por las fases de captura y burbujeo:

  • focus y blur (aunque existen focusin y focusout que sí se propagan)
  • load y unload
  • mouseenter y mouseleave (a diferencia de mouseover y mouseout)
  • resize
  • error

Para estos eventos, la delegación no funcionará de la forma habitual. Por ejemplo:

// Esto NO funcionará porque focus no burbujea
document.getElementById('formulario').addEventListener('focus', function(e) {
  console.log('Campo enfocado:', e.target.name); // No se ejecutará
}, false);

// Alternativas:
// 1. Usar focusin que sí burbujea
document.getElementById('formulario').addEventListener('focusin', function(e) {
  console.log('Campo enfocado (con focusin):', e.target.name);
});

// 2. Usar capturing para eventos que no burbujean
document.getElementById('formulario').addEventListener('focus', function(e) {
  console.log('Campo enfocado (con captura):', e.target.name);
}, true);

Implementación de patrones eficientes

Patrón Observer simplificado

Este patrón permite implementar un sistema de eventos personalizado:

// Implementación básica de un sistema de eventos
const EventEmitter = {
  eventos: {},
  
  // Añadir listener
  on: function(evento, callback) {
    if (!this.eventos[evento]) {
      this.eventos[evento] = [];
    }
    this.eventos[evento].push(callback);
    return this; // Para encadenamiento
  },
  
  // Eliminar listener
  off: function(evento, callback) {
    if (this.eventos[evento]) {
      this.eventos[evento] = this.eventos[evento].filter(
        fn => fn !== callback
      );
    }
    return this;
  },
  
  // Emitir evento
  emit: function(evento, data) {
    if (this.eventos[evento]) {
      this.eventos[evento].forEach(callback => callback(data));
    }
    return this;
  }
};

// Uso:
const carrito = Object.create(EventEmitter);

// Definir listeners
carrito.on('productoAgregado', function(producto) {
  console.log(`Producto agregado: ${producto.nombre}`);
  actualizarInterfaz();
});

carrito.on('productoEliminado', function(id) {
  console.log(`Producto eliminado: ID ${id}`);
  actualizarInterfaz();
});

// Emitir eventos
function agregarProducto(producto) {
  // Lógica para agregar producto
  carrito.emit('productoAgregado', producto);
}

function eliminarProducto(id) {
  // Lógica para eliminar producto
  carrito.emit('productoEliminado', id);
}

Optimización del rendimiento

Algunas técnicas para optimizar el manejo de eventos:

  1. Uso de throttling y debouncing para eventos frecuentes:
// Debouncing: ejecuta la función solo después de que no se haya llamado durante el tiempo especificado
function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Throttling: limita la frecuencia de ejecución de una función
function throttle(fn, limit) {
  let throttling = false;
  return function(...args) {
    if (!throttling) {
      fn.apply(this, args);
      throttling = true;
      setTimeout(() => {
        throttling = false;
      }, limit);
    }
  };
}

// Ejemplos de uso:
// Para eventos de scroll
window.addEventListener('scroll', debounce(function() {
  console.log('Scroll finalizado');
  actualizarElementosVisibles();
}, 250));

// Para eventos de resize
window.addEventListener('resize', throttle(function() {
  console.log('Ventana redimensionada');
  ajustarLayout();
}, 300));
  1. Uso de la opción passive para eventos táctiles y de scroll:
// Mejora significativamente el rendimiento en dispositivos móviles
document.addEventListener('touchstart', handleTouch, { passive: true });
document.addEventListener('touchmove', handleMove, { passive: true });
document.addEventListener('scroll', handleScroll, { passive: true });

Resumen

En este artículo hemos explorado en profundidad los mecanismos de propagación de eventos en JavaScript:

  • Las tres fases de propagación: captura (descendente), objetivo y burbujeo (ascendente).
  • Cómo controlar estas fases con el tercer parámetro de addEventListener.
  • Métodos para detener la propagación: stopPropagation() y stopImmediatePropagation().
  • Delegación de eventos: un patrón poderoso para manejar eficientemente múltiples elementos.
  • Eventos que no se propagan y cómo trabajar con ellos.
  • Patrones y optimizaciones para implementar sistemas de eventos eficientes.

Comprender estos conceptos es fundamental para crear aplicaciones web interactivas y eficientes. En el próximo artículo, profundizaremos en la prevención de comportamientos por defecto, otro aspecto clave para el manejo avanzado de eventos en JavaScript.

Volver arriba