En la sección anterior, vimos un problema ocasionado por el burbujeo de eventos y cómo solucionarlo. El burbujeo de eventos no simplemente es molesto, sino que puede resultar bastante útil. Particularmente, hace posible la delegación de eventos. En esta técnica, cuando queremos que cierto código se ejecute cuando el usuario interacciona con cualquiera de un gran número de elementos descendientes, establecemos el detector de eventos en el padre y dejamos que los eventos burbujeen hasta el padre, en vez de establecer el detector de eventos individualmente en cada descendiente.

Regresemos a nuestro primer ejemplo, donde establecemos el color de toda la página cuando el usuario hace clic en un botón. Imagina que en su lugar, la página está dividida en 16 secciones, y queremos establecer un color de fondo aleatorio en cada sección cuando el usuario hace clic en una sección.

Aquí está el HTML:

Estamos usando un poco de CSS para establecer el tamaño y posición de las secciones:

Ahora desde JavaScript podemos agregar un manejador del evento clic para cada sección. Pero una solución más sencilla y más eficiente sería agregar un solo detector de eventos en el padre, y aprovecharnos del burbujeo de eventos para asegurarnos de que el manejador se ejecuta cuando el usuario hace clic en una sección:

El resultado es de la siguiente forma (intenta hacer clic alrededor):

Ver Resultado