События в JS

Что такое распространение события (Event Propagation)?

Event Propagation — это механизм, определяющий порядок, в котором события обрабатываются в DOM-дереве.

Основные фазы:

Погружение (Capturing):
- Событие начинается с корневого элемента и проходит вниз до целевого элемента.
- Пример:
```
element.addEventListener('click', handler, true); // true - использовать фазу погружения
```
Целевой элемент (Target):
- Событие достигает целевого элемента и обрабатывается.
Всплытие (Bubbling):
- Событие поднимается обратно вверх по дереву от целевого элемента к корневому.
- Пример:
```
element.addEventListener('click', handler); // По умолчанию false - использовать фазу всплытия
```

Что такое всплытие события (`Event Bubbling`)?

Event Bubbling — это процесс, при котором событие, сначала обработанное целевым элементом, поднимается вверх по DOM-дереву, вызывая обработчики событий на каждом из родительских элементов.

Основные характеристики:

Порядок обработки:
- Событие сначала обрабатывается целевым элементом.
- Затем поднимается (всплывает) к его родительским элементам и далее к корневому элементу.

Пример:

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked");
});

// При клике на элемент с id "child" сначала будет выведено "Child clicked", затем "Parent clicked"

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

Что такое погружение события (`Event Capturing`)?

Event Capturing — это фаза распространения события в DOM, при которой событие проходит сверху вниз от корневого элемента к целевому элементу.

Основные характеристики:

Порядок обработки:
- Событие сначала проходит через корневой элемент и спускается к целевому элементу, обрабатываясь на каждом уровне.
Включение захвата:
- Для использования фазы погружения необходимо установить третий параметр в true при добавлении обработчика событий.
- Пример:
```
document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked");
}, true);

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked");
}, true);
```

Погружение события позволяет обрабатывать события, начиная с корневого элемента и спускаясь вниз к целевому элементу, до того как событие достигнет целевого элемента.

Что такое цель события или целевой элемент (`event.target`)?

event.target — это элемент, на котором первоначально произошло событие.

Пример использования:

document.getElementById("myButton").addEventListener("click", function (event) {
  console.log(event.target); // Выведет элемент, на котором произошел клик
});

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

Что такое текущая цель события (`event.currentTarget`)?

event.currentTarget — это элемент, на котором в данный момент обрабатывается событие.

Пример использования:

document.getElementById("myButton").addEventListener("click", function (event) {
  console.log(event.currentTarget); // Выведет элемент myButton
});

event.currentTarget указывает на элемент, к которому привязан обработчик события, независимо от того, где произошло событие.