Что такое событийная модель в браузере?

Cпособ обработки взаимодействий пользователя (кликов, ввода, наведения) и системных событий (загрузка страницы, ошибок) в веб-браузере.

Основные концепции:

• Событие: Действие, которое произошло.
• Обработчик события: Функция, которая выполняется при наступлении события.
• Объект события (Event object): Передается в обработчик и содержит информацию о событии (тип, элемент, координаты и т.д.).

Стандартный поток событий:

1. Захват (Capturing phase): Событие спускается от самого верхнего элемента DOM (Window, Document) к целевому элементу. Обработчики на этом этапе срабатывают первыми.
2. Фаза цели (Target phase): Событие достигает целевого элемента - элемента, где оно произошло.
3. Всплытие (Bubbling phase): Событие поднимается от целевого элемента обратно по DOM-дереву к Window. Обработчики на этом этапе срабатывают после фазы захвата и цели.

Добавление обработчиков:

• Атрибуты HTML (onclick, onload): Устаревший способ, не рекомендуется для сложных приложений.
• Свойства элементов DOM (element.onclick): Можно назначить только один обработчик на каждый тип события для элемента.

  javascript

• Метод addEventListener: Предпочтительный способ. Позволяет добавлять несколько обработчиков для1го события и контролировать1фазу1обработки (захват или1всплытие).

  javascript

Метод removeEventListener используется для удаления обработчиков.

Делегирование событий (Event delegation): Присоединение одного обработчика к родительскому элементу для обработки событий1от1дочерних1элементов. Экономит ресурсы и упрощает работу1с1динамическим1содержимым.

javascript