¿Qué sucede si agregamos un detector de eventos al botón y al padre?
.png "carbon(696).png")
Intentemos agregar un manejador de eventos al botón, a su padre (el <div>) y, además, al elemento <body> que contiene a ambos:
.png "carbon(697).png")
Te darás cuenta que los tres elementos lanzan un evento de clic cuando el usuario hace clic en el botón:
.png "carbon(698).png")
En este caso:
- el clic en el botón se lanza primero
- seguido del clic en el padre (el elemento <div>)
- por último, se lanza en el padre del elemento <div> (el elemento <body>).
Para describir esta situación, decimos que el evento burbujea hacia arriba (_bubbles up_, en inglés) desde el elemento más interno que recibió un clic.
Este comportamiento puede ser útil a la par de causar problemas inesperados. En las siguientes secciones veremos los problemas que causa y encontraremos una solución.