Entendiendo el 'Event Bubbling' en JavaScript

'Event Bubbling' es un concepto fundamental de JavaScript relacionado con el manejo de eventos. Para entender completamente esta idea, primero debemos entender qué es un evento en JavaScript. Un evento es básicamente una acción que ocurre en la página web, como un clic del mouse, una tecla pulsada, deslizamientos, movimientos del mouse, etc.

Ahora, cuando este tipo de eventos ocurre en un elemento que está anidado dentro de otros elementos, se propaga desde el elemento más interno al más externo. Esta es la esencia del 'Event Bubbling'. Esto significa que si un elemento y uno de sus antepasados tienen un manejador para el mismo evento (por ejemplo, un clic), el evento será manejado primero por el elemento y luego por su antecesor.

Por ejemplo, si tenemos tres elementos div anidados uno dentro del otro y el usuario hace clic en el elemento más interno; entonces, el evento se manejará primero en el elemento más interno y luego se propagará hacia arriba a través de los elementos externos.

<div onclick="console.log('div 1')">
  <div onclick="console.log('div 2')">
    <div onclick="console.log('div 3')">Pulsa aquí</div>
  </div>
</div>

En el ejemplo anterior, si el usuario hace clic donde dice "Pulsa aquí", verá en la consola:

div 3
div 2
div 1

Eso es 'Event Bubbling' en acción: el evento se maneja y luego se "burbujea" hacia arriba a través del árbol de elementos.

Es importante mencionar que podemos controlar cómo se propaga el evento utilizando event.stopPropagation(). Este método detiene la propagación del evento, lo que significa que los manejadores de eventos de los elementos antecesores no se activarán.

Por último, vale la pena mencionar que 'Event Bubbling' es la forma predeterminada en la que se propagan los eventos en JavaScript, aunque también existe otra forma, llamada 'Event Capturing', que maneja los eventos desde el elemento más externo al más interno. En la práctica, 'Event Bubbling' es la técnica más utilizada y suele ser suficiente para la mayoría de las situaciones.