EVENT BUBBLING: QUÉ ES Y CÓMO FUNCIONA EN JAVASCRIPT

Event Bubbling es el comportamiento por defecto de los eventos en JavaScript. Cuando ocurre un evento, como un click, mouseover, etc., en un elemento HTML, ese evento no solo afecta al elemento donde se originó, sino que se propaga hacia arriba a través de todos sus elementos padres, hasta llegar al document o window. Es como si el evento "burbujeara" (subiera) desde el elemento más interno hasta el más externo. Ejemplo visual:

    <div id="abuelo">
   <div id="padre">
  <button id="hijo">Click me</button>
   </div>
    </div>
  1. Si se hace clic en el "button":El evento se activa primero en el button (elemento objetivo)
  2. Luego sube al padre (div#padre)
  3. Luego sube al abuelo (div#abuelo)
  4. Finalmente llega al document y window

Código de ejemplo

document.getElementById('hijo').addEventListener('click', () => {
    console.log('Click en el botón (hijo)');
});

document.getElementById('padre').addEventListener('click', () => {
    console.log('Click en el padre');
});

document.getElementById('abuelo').addEventListener('click', () => {
    console.log('Click en el abuelo');
});
//Si se  hace clic en el botón, en consola se mostrará:
Click en el botón (hijo)
Click en el padre
Click en el abuelo