Todos nós estamos vendo alguns sites mágicos, certo? Clicando em algum botão, o botão muda de cor, muda o tipo de borda ou assim por diante, mas você sabe como funciona nos bastidores?

Em primeiro lugar, devemos falar sobre o DOM. Então, o que é DOM?
Você pode pensar no DOM (Document Object Model) como uma interface entre o navegador e o código javascript. Ele nos permite fazer o javascript interagir com o navegador.

Também existe a árvore DOM que é gerada a partir de um documento HTML e, graças a isso, estamos alterando as coisas na página dinamicamente.

Como o DOM se organizou nos bastidores?

Portanto, tudo na árvore DOM é representado por um objeto que é Node.Node herda os métodos de protótipo de EventTarget e, assim, podemos adicionar ouvintes de eventos ou outras coisas.
Este esquema nos mostra a hierarquia da API DOM e você pode considerá-la uma herança de cima para baixo.Element ,Text,Comment recebe métodos de Node.Node recebe métodos de EventTarget… O exemplo perfeito
para Protype Chain e Introdução ao Synthetic OOP JS.

Vamos digitar isso;
console.dir(Nó)

No objeto de protótipo da função do construtor do nó, você pode ver métodos. Se você quiser ver a hierarquia de herança de cima para baixo;

console.dir(HTMLElement.__proto__.__proto__)

Na verdade, até HTMLElement é uma função construtora, podemos ver que podemos pegar o protótipo dele porque todo objeto em Javascript tem protótipo.

Bubbling e Captura de Eventos:

Digamos que estamos clicando em um botão e para o botão existe um event listener , mas o evento ocorre neste elemento ?Claro que não...
Quando adicionamos eventlistener a qualquer Node ;

document.getElementByID().addEventListener …

O evento ocorre em EventTarget.
Mesmo o método vem do objeto de protótipo no Event Target.
Depois de acionar o evento, a Fase de Captura começa onde o evento percorre todo o caminho desde a rota do documento até o elemento de destino.
Quando está no nó certo, a fase de destino começa e com a fase de destino, podemos manipular o evento com a função de retorno de chamada.

Então, quero dizer, nós acionamos o evento, o evento foi perfurado de EventTarget para o nó que lidamos com o retorno de chamada, agora ele começa a borbulhar.
Como um balão.
Do nó de destino ao EventTarget.
Período desse processo se houver outro eventListener também serão chamados.
Para evitar isso, temos um método especial que é ;

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