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

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

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

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

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

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

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

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

  // Пример
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Нажата кнопка!');
  };
  

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

  // Пример
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Клик на кнопку!', event);
  }, false); // false - всплытие, true - захват
  

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

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

// Пример делегирования
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Клик на элемент списка:', event.target.textContent);
    }
});