Какие есть фазы события?

События в JavaScript проходят три фазы, которые помогают определить, как они обрабатываются на веб-странице:

• Фаза захвата: В этой фазе событие "захватывается" сверху вниз по дереву DOM. Сначала оно достигает верхнего уровня элементов и движется вниз к целевому элементу. В этой фазе обработчики событий, установленные на родительских элементах, могут реагировать на событие. Чтобы обработчик сработал в фазе захвата, при добавлении обработчика события нужно указать третий аргумент как true.

document.getElementById('parent').addEventListener('click', function() {
	console.log('Захват события!'); 
}, true);

• Целевая фаза: Событие достигает целевого элемента, на котором оно произошло. Обработчики событий, прикрепленные непосредственно к этому элементу, выполняются в этой фазе. Если целевой элемент имеет обработчики событий, они будут вызываться в этой фазе.

document.getElementById('myButton').addEventListener('click', function() {
	console.log('Кнопка нажата!'); 
});

• Фаза всплытия: После обработки события на целевом элементе событие начинает "всплывать" обратно вверх по дереву DOM, проходя от дочернего к родительскому элементу. Обработчики событий, установленные на родительских элементах, могут быть вызваны в этой фазе. Это полезно для делегирования событий, так как вы можете установить один обработчик на родительском элементе и реагировать на события дочерних элементов.

document.getElementById('parent').addEventListener('click', function() {
	console.log('Всплытие события!'); 
});

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