Мы все видим какие-то волшебные веб-сайты, верно? Нажатие какой-либо кнопки, затем кнопка меняет цвет, тип границы или так далее, но знаете ли вы, как это работает за кулисами?

Во-первых, мы должны поговорить о DOM. Так что же такое ДОМ?
Вы можете представить DOM (объектную модель документа) как интерфейс между браузером и кодом javascript. Это позволяет нам заставить javascript взаимодействовать с браузером.

Также есть дерево DOM, которое генерируется из HTML-документа, и благодаря этому мы динамически изменяем вещи на странице.

Как DOM организован за кулисами?

Таким образом, все в дереве DOM представлено объектом, который Node.Node наследует методы прототипа EventTarget, и таким образом мы можем добавлять прослушиватели событий или другие вещи.
Эта схема показывает нам иерархию DOM API, и вы можете думать, что это наследование сверху вниз. Element, Text, Comment берут методы из Node.Node берет методы из EventTarget…
Прекрасный пример для Protype Chain и Introduction to Synthetic OOP JS.

Давайте напечатаем это;
console.dir(узел)

В объекте-прототипе функции конструктора Node вы можете увидеть методы. Если вы хотите увидеть иерархию наследования сверху вниз;

console.dir(HTMLElement.__proto__.__proto__)

На самом деле даже HTMLElement является функцией-конструктором, мы видим, что можем взять его прототип, потому что каждый объект в Javascript имеет прототип.

Всплывание и захват событий:

Допустим, мы нажимаем кнопку, и для кнопки есть прослушиватель событий, но происходит ли событие в этом элементе? Черт возьми…
Когда мы добавляем прослушиватель событий к любому узлу;

document.getElementByID().addEventListener …

Событие происходит в EventTarget.
Даже метод исходит из объекта-прототипа в Event Target.
После запуска события начинается фаза захвата, когда событие проходит весь путь вниз от маршрута документа к целевому элементу.
Когда он находится в нужном узле, начинается целевая фаза, и с целевой фазой мы можем обработать событие с помощью функции обратного вызова.

Затем я имею в виду, что мы инициировали событие, событие, перенесенное из EventTarget в Node, которое мы обработали с помощью обратного вызова, теперь оно начинает всплывать.
Как воздушный шар.
От целевого узла к EventTarget.
Период этого процесса, если есть другой прослушиватель событий, также будет вызван.
Чтобы предотвратить это, у нас есть специальный метод ;

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