Всплытие и погружение js
Всплытие (bubbling) и погружение (capturing) - это два механизма обработки событий в JavaScript, которые происходят во время взаимодействия пользователя с веб-страницей. Эти механизмы связаны с распространением событий внутри DOM-структуры.
Всплытие (Bubbling):
Когда пользователь выполняет какое-либо действие (например, клик или наведение мыши) на элементе, событие начинает всплывать от самого вложенного элемента к родительским элементам. Другими словами, событие сначала обрабатывается на самом внутреннем элементе, а затем поочередно на его родителях вверх по иерархии DOM.
Пример:
```javascript
<div id="parent">
<button id="child">Нажми меня</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => {
console.log('Событие на родителе');
});
child.addEventListener('click', () => {
console.log('Событие на потомке');
});
</script>
```
Если пользователь кликнет на кнопке "Нажми меня", то сначала будет выведено "Событие на потомке", а затем "Событие на родителе".
Погружение (Capturing):
В отличие от всплытия, при использовании механизма погружения событие сначала поймается на самом внешнем элементе (например, на корневом элементе документа) и затем будет перехвачено на элементах вложенной структуры. Событие движется "сверху вниз" по иерархии DOM.
Пример:
```javascript
<div id="parent">
<button id="child">Нажми меня</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => {
console.log('Событие на родителе', { capture: true });
}, true);
child.addEventListener('click', () => {
console.log('Событие на потомке', { capture: true });
}, true);
</script>
```
Если пользователь кликнет на кнопке "Нажми меня", то сначала будет выведено "Событие на родителе" (с указанием `{ capture: true }`), а затем "Событие на потомке" (с указанием `{ capture: true }`).
**Как выбрать между всплытием и погружением**:
Большинство событий в DOM используют механизм всплытия по умолчанию. Вы можете использовать фазу захвата, указав третий аргумент `true` при добавлении слушателя события. Выбор между этими механизмами зависит от конкретных требований вашего проекта.
- Всплытие обычно удобно, если вам нужно обработать событие на конечном элементе и затем проследить его распространение вверх для выполнения других действий.
- Погружение может быть полезным, если вам нужно перехватить событие на более высоком уровне в иерархии DOM, прежде чем оно достигнет конечного элемента.
Обратите внимание, что не все события поддерживают оба механизма (всплытие и погружение). Например, события `focus` и `blur` используют только механизм всплытия.