El DOM es un árbol que renderiza nodos de forma jerárquica. Cuando un evento sucede, se propaga entre cada padre que tiene el elemento escuchado.

<div id="div1">
	<div id="div2">
    <div id="div3">
        Hola
    </div>
	</div>
</div>

<aside> 💡 Si agregamos un event listener a los 3 divs y haces clic dentro del div 3, el evento se propagará hacia los 3 divs ya que el div 3 está contenido dentro del div 2 que a su vez está contenido dentro del div 1.

</aside>

stopProgagation()

Para detener este comportamiento, podemos utilizar el método stopPropagation() que viene incluido en el objeto event que cualquier evento nos proporciona. De esta forma, podemos indicarle al div3 que solo queremos hacer clic en él y no en los demás elementos que lo contienen.

Para agregar un event listener al programa, podemos utilizar el siguiente código:

div3.addEventListener("click", event => {
  event.stopPropagation()
});
// De esta forma, el evento del div1 y div2 no serán ejecutados.

Otro dato curioso de RetaxMaster

<aside> 💡 Cuando tu defines un elemento con un ID en HTML, en JavaScript se crea automágicamente una variable con ese id que creaste, por eso es completamente posible que yo pueda usar la variable div3 sin tener que seleccionar el elemento 👀

</aside>

Archivos de la Clase

Event propagation