Что происходит с событием если оно на уровне выше?

Всплытие событий (Event Bubbling) в DOM

Когда событие происходит на элементе в DOM, оно не останавливается на этом элементе, а начинает всплывать (bubbling) вверх по иерархии DOM к корню документа. Это один из трех фаз жизненного цикла события в модели Event Flow W3C.

Три фазы распространения события:

1. Фаза захвата (Capture Phase) - событие движется от корня документа к целевому элементу
2. Фаза цели (Target Phase) - событие достигло целевого элемента
3. Фаза всплытия (Bubbling Phase) - событие поднимается от целевого элемента к корню

// Пример структуры DOM
<div id="grandparent">
  <div id="parent">
    <button id="child">Кликни меня</button>
  </div>
</div>

// Обработчики событий
document.getElementById('grandparent').addEventListener('click', function() {
  console.log('Всплытие: grandparent');
});

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

document.getElementById('child').addEventListener('click', function() {
  console.log('Целевой элемент: child');
});

// При клике на кнопку вывод будет:
// Целевой элемент: child
// Всплытие: parent
// Всплытие: grandparent

Ключевые аспекты всплытия событий:

Как работает процесс:

• Событие начинается на целевом элементе (например, клик на кнопке)
• Затем оно последовательно поднимается к родительским элементам
• Каждый родительский элемент в цепочке получает возможность обработать событие
• Процесс продолжается до объекта document, а затем до window

Преимущества всплытия:

• Делегирование событий - возможность обрабатывать события на родительском элементе
• Эффективность при работе с динамическими элементами
• Упрощение архитектуры обработки событий

// Пример делегирования событий
document.getElementById('list').addEventListener('click', function(event) {
  // Проверяем, был ли клик на элементе списка
  if (event.target.tagName === 'LI') {
    console.log('Кликнут элемент списка:', event.target.textContent);
  }
});

Управление всплытием:

Остановка всплытия:

element.addEventListener('click', function(event) {
  event.stopPropagation(); // Останавливает всплытие
  event.stopImmediatePropagation(); // Останавливает всплытие и выполнение других обработчиков на этом элементе
});

Предотвращение поведения по умолчанию:

element.addEventListener('click', function(event) {
  event.preventDefault(); // Предотвращает действие по умолчанию
});

Особые случаи и нюансы:

1. Не все события всплывают - некоторые события (например, focus, blur, load, unload) не всплывают
2. event.target vs event.currentTarget:
   • event.target - исходный элемент, на котором произошло событие
   • event.currentTarget - элемент, на котором в данный момент выполняется обработчик

parentElement.addEventListener('click', function(event) {
  console.log('target:', event.target.id); // Исходный элемент (кнопка)
  console.log('currentTarget:', event.currentTarget.id); // Текущий элемент (родитель)
});

1. Всплытие через теневое DOM (Shadow DOM) - события могут пересекать границы Shadow DOM, если они не отменены

Практическое применение:

Делегирование событий - наиболее мощное применение всплытия:

// Один обработчик для множества динамических элементов
document.querySelector('.dynamic-container').addEventListener('click', function(e) {
  const button = e.target.closest('[data-action]');
  if (button) {
    const action = button.dataset.action;
    switch(action) {
      case 'delete':
        deleteItem(button.dataset.id);
        break;
      case 'edit':
        editItem(button.dataset.id);
        break;
    }
  }
});

Оптимизация производительности - меньше обработчиков событий в памяти Упрощение управления событиями для сложных UI-компонентов

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