Модели ҳодиса дар браузер чист?

Насловний спосіб обробки взаємодій користувача (кліки, введення, наведення) та системних подій (завантаження сторінки, помилки) у веб-браузері.

Основні концепції:

Подія: дія, яка сталася.
Обробник події: функція, яка виконується при настанні події.
Об'єкт події (Event object): передається обробнику і містить інформацію про подію (тип, елемент, координати тощо).

Стандартний потік подій:

Захоплення (Capturing phase): подія спускається від найвищого елемента DOM (Window, Document) до цільового елемента. Обробники на цьому етапі спрацьовують першими.
Фаза цілі (Target phase): подія досягає цільового елемента - елемента, де вона сталася.
Вспливання (Bubbling phase): подія піднімається від цільового елемента назад по 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 використовується для видалення обробників.

Делегування подій (Event delegation): приєднання одного обробника до батьківського елемента для обробки подій від дочірніх елементів. Економить ресурси і спрощує роботу з динамічним вмістом.

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