Todos estamos viendo algunos sitios web mágicos, ¿verdad? Al hacer clic en algún botón, luego el botón cambia de color, cambia el tipo de borde, etc., pero ¿sabe cómo funciona detrás de escena?

En primer lugar, deberíamos hablar sobre el DOM. Entonces, ¿qué es DOM?
Puede pensar en DOM (Document Object Model) como una interfaz entre el navegador y el código javascript. Nos permite hacer que javascript interactúe con el navegador.

También hay un árbol DOM que se genera a partir de un documento HTML y gracias a esto estamos cambiando las cosas en la página de forma dinámica.

¿Cómo se organizó DOM detrás de escena?

Entonces, todo en el árbol DOM está representado por un objeto que es Node. Node hereda los métodos prototipo de EventTarget y así podemos agregar detectores de eventos u otras cosas.
Este esquema nos muestra la jerarquía de la API DOM y puede considerarlo como una herencia de arriba a abajo. Elemento, Texto, Comentario toma métodos de Node. Node toma métodos de EventTarget... El ejemplo perfecto
para Protype Chain e Introducción a Synthetic OOP JS.

Escribamos esto;
consola.dir(Nodo)

En el objeto prototipo de la función de constructor de nodos, puede ver los métodos. Si desea ver la jerarquía de la herencia de arriba a abajo;

consola.dir(HTMLElement.__proto__.__proto__)

En realidad, incluso HTMLElement es una función de constructor, podemos ver que podemos tomar el prototipo porque cada objeto en Javascript tiene un prototipo.

Burbujeo y captura de eventos:

Digamos que estamos haciendo clic en un botón y para el botón hay un detector de eventos, pero ¿ocurre un evento en este elemento? Diablos, no...
Cuando agregamos un detector de eventos a cualquier nodo;

documento.getElementByID().addEventListener …

El evento ocurre en EventTarget.
Incluso el método proviene del objeto prototipo en Event Target.
Después de desencadenar el evento, la fase de captura comienza donde el evento viaja desde la ruta del documento hasta el elemento de destino.
Cuando está en el nodo derecho, comienza la fase de destino y con la fase de destino podemos manejar el evento con la función de devolución de llamada.

Luego, quiero decir que activamos el evento, el evento se desglosó desde EventTarget al Nodo que manejamos con devolución de llamada, ahora comienza a burbujear.
Como un globo.
Desde el nodo objetivo hasta el objetivo del evento.
Período de este proceso si hay otro eventListener también serán llamados.
Para evitar esto, tenemos un método especial que es;

document.getElementByID().addEventListener("click",
                                   (myEvent)=>myEvent.stoppropagation())