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

Question

События в JavaScript проходят три фазы: захват, целевая и всплытие. В фазе захвата событие сначала идет сверху вниз по дереву DOM, начиная с родительского элемента до целевого элемента. Затем событие обрабатывается на целевом элементе, после чего оно поднимается обратно вверх по дереву (фаза всплытия). Это позволяет назначать обработчики на разных уровнях и использовать делегирование событий.

YeaHub · Accepted Answer

События в 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('Всплытие события!'); 
});Понимание фаз событий позволяет разработчикам более эффективно управлять обработкой событий на веб-страницах и использовать такие техники, как делегирование событий, для оптимизации кода и повышения производительности.