---
title: События в JS
seo:
title: События в JS — React Developer
description: Тема «События в JS» для собеседования React Developer. Что такое распространение события (Event Propagation)? Что такое всплытие события (Event Bubbling)?
---
[Все темы React Developer](/react-developer)
## Что такое распространение события (Event Propagation)? [#q-14bee738d69b811b834efeb69a5163de]
Event Propagation — это механизм, определяющий порядок, в котором
события обрабатываются в DOM-дереве.
#### Основные фазы:
{/* prettier-ignore */}
1. Погружение (Capturing):
- Событие начинается с корневого элемента и проходит вниз до целевого элемента.
- Пример:
```javascript
element.addEventListener('click', handler, true); // true - использовать фазу погружения
```
1. Целевой элемент (Target):
- Событие достигает целевого элемента и обрабатывается.
1. Всплытие (Bubbling):
- Событие поднимается обратно вверх по дереву от целевого элемента к корневому.
- Пример:
```javascript
element.addEventListener('click', handler); // По умолчанию false - использовать фазу всплытия
```
:::note[Ссылки для изучения]
1. [Браузерные события в JavaScript](https://learn.javascript.ru/introduction-browser-events)
:::
---
## Что такое всплытие события (Event Bubbling)? [#q-14bee738d69b81e3ac13c86f749a88a1]
Event Bubbling — это процесс, при котором событие, сначала
обработанное целевым элементом, поднимается вверх по DOM-дереву, вызывая
обработчики событий на каждом из родительских элементов.
#### Основные характеристики:
{/* prettier-ignore */}
1. Порядок обработки:
- Событие сначала обрабатывается целевым элементом.
- Затем поднимается (всплывает) к его родительским элементам и далее к корневому элементу.
1. Пример:
```javascript
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-дереву.
:::note[Ссылки для изучения]
1. [Браузерные события в JavaScript](https://learn.javascript.ru/introduction-browser-events)
:::
---
## Что такое погружение события (Event Capturing)? [#q-14bee738d69b8163a5f8d2d570a6d56a]
Event Capturing — это фаза распространения события в DOM, при
которой событие проходит сверху вниз от корневого элемента к целевому элементу.
#### Основные характеристики:
{/* prettier-ignore */}
1. Порядок обработки:
- Событие сначала проходит через корневой элемент и спускается к целевому элементу, обрабатываясь на каждом уровне.
1. Включение захвата:
- Для использования фазы погружения необходимо установить третий параметр в true при добавлении обработчика событий.
- Пример:
```javascript
document.getElementById("parent").addEventListener("click", function() {
console.log("Parent clicked");
}, true);
document.getElementById("child").addEventListener("click", function() {
console.log("Child clicked");
}, true);
```
Погружение события позволяет обрабатывать события, начиная с корневого элемента и спускаясь вниз к целевому элементу, до того как событие достигнет целевого элемента.
:::note[Ссылки для изучения]
1. [Браузерные события в JavaScript](https://learn.javascript.ru/introduction-browser-events)
:::
---
## Что такое цель события или целевой элемент (event.target)? [#q-14bee738d69b81358b16ea3aed4faa62]
event.target — это элемент, на котором первоначально произошло
событие.
#### Пример использования:
```javascript
document.getElementById("myButton").addEventListener("click", function (event) {
console.log(event.target); // Выведет элемент, на котором произошел клик
});
```
event.target указывает на элемент, вызвавший событие, позволяя
обработчику узнать, где именно оно произошло.
:::note[Ссылки для изучения]
1. [Браузерные события в JavaScript](https://learn.javascript.ru/introduction-browser-events)
:::
---
## Что такое текущая цель события (event.currentTarget)? [#q-14bee738d69b81278273cd17d70eaaeb]
event.currentTarget — это элемент, на котором в данный момент
обрабатывается событие.
#### Пример использования:
```javascript
document.getElementById("myButton").addEventListener("click", function (event) {
console.log(event.currentTarget); // Выведет элемент myButton
});
```
event.currentTarget указывает на элемент, к которому привязан
обработчик события, независимо от того, где произошло событие.
:::note[Ссылки для изучения]
1. [Браузерные события в JavaScript](https://learn.javascript.ru/introduction-browser-events)
:::