Какво е моделът на събитията в браузъра?

Метод за обработка на взаимодействията на потребителя (кликове, въвеждане, задържане с мишката) и системните събития (зареждане на страница, грешки) в уеб браузъра.

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

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

Стандартен поток на събитията:

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

Добавяне на обработчици:

• HTML атрибути (onclick, onload): Остарял начин, не се препоръчва за сложни приложения.
• Свойства на DOM елементи (element.onclick): Може да се зададе само един обработчик за всеки тип събитие за даден елемент.

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

• Метод addEventListener: Предпочитан начин. Позволява добавяне на няколко обработчика за едно събитие и контролира фазата на обработка (засичане или бубъл).

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

Методът removeEventListener се използва за премахване на обработчици.

Делегиране на събития: Прикачване на един обработчик към родителски елемент за обработка на събития от дъщерните елементи. Спестява ресурси и улеснява работата с динамично съдържание.

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