Браузерный JS

Главное помнить, что this глобально ссылается на window в браузере, а в NodeJS на global.

DOM - Document Object Model - объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять. Дерево строится на основе html тэгов. Каждый html тэг является объектом. Все операции с DOM начинаются с ключевого слово document.

BOM - Browser Object Model - это дополнительные объекты, предоставляемые браузером, что бы работать со всем, кроме документа.

Браузерные события

Событие - это сигнал браузеру, что что-то произошло.

Существуют различные события, такие как:

События мыши:
- click
- contextmenu
- mouseover/mouseout
- mousedown/mouseup
- mousemove
События на элементах управления:
- submit
- focus
Клавиатурные события:
- keydown
- keyup
События документа:
- DOMContentLoaded

Обработчики событий - событию можно назначить обработчик, то есть функцию которая отработает, как только произойдет событие.

addEventListener - позволяет добавить сразу несколько действий на событие

Всплытие и погружение

Принцип всплытия крайне прост - когда событие срабатывает на элементе, то оно поднимается вверх по родителям.

eventTarget - это самый глубокий элемент, который вызывает событие.

Погружение - событие обратное всплытию.

Существует 3 фазы перехода события:

Фаза погружения - событие идет сверху вниз;
Фаза цели - событие достигает целевого элемента;
Фаза всплытия - событие начинает всплывать.

StopPropagation - остановка пути

Event Propagation — это механизм, который определяет, как события проходят через объектную модель документа (DOM) при возникновении события, в конечном итоге достигая целевого элемента и, возможно, выполняя дальнейшие действия на основе события.

prevent default - событие, которое используется для отмены действия браузера по умолчанию. Как пример - отмена перехода по ссылке при клике на нее.

Current target - содержит элемент, для которого было назначено событие. В отличие от event.target, это не самый глубокий тег, в котором случилось событие, а именно элемент, к которому оно было привязано.

DOM content loaded - Событие запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.

и td**

область видимости, постфиксаня префиксная форма, контекст, event loop, объеты(создание перебор свойств копирование, дескрипторы)

let a = 1, b=1;
alert(++a); // 2, префиксная форма возвращает новое значение
alert(b++); // 1, постфиксная форма возвращает старое значение

замыкания,лекс окружение, массивы методы мутирования.

У жизненного цикла HTML-страницы есть три важных события:

DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки <img> и стили, могут быть ещё не загружены.
load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
beforeunload/unload – пользователь покидает страницу.

EventCurrentTarget - доступное только для чтения, Event идентифицирует элемент, к которому прикреплен обработчик событий.

focus/blur - никогда не всплывают.

Критический путь рендеринга – это набор минимально необходимых для начала отрисовки страницы действий, ресурсов и вычислений. Посмотрим основные шаги, которые включает в себя критический путь:

Получить HTML-документ.
Провести парсинг HTML на предмет включенных ресурсов.
Построить DOM tree (document object model).
Отправить запросы критических элементов.
Получить весь CSS-код (также запустить запросы на JS-файлы).
Построить CSSOM tree.
Выполнить весь полученный JS-код.
Перестроить DOM tree (при необходимости).
Построить Render tree и начать отрисовку страницы.

Last modified: 10 July 2025