> Как реализовать обработку клика на любой div внутри root и выводить в консоль только id этого div в JavaScript (JavaScript)

Короткий ответ

Используем делегирование событий: вешаем один обработчик на root через addEventListener с параметром capture или всплытие. Внутри проверяем event.target, получаем id через dataset или атрибут. Для точного попадания на div используем closest('div') или проверку tagName. Это эффективно, не требует подписки на каждый div и работает с динамически добавленными элементами.

Подробное объяснение

Делегирование событий - ключевой паттерн для обработки кликов на множестве однотипных элементов. Вместо того чтобы вешать обработчик на каждый div, мы используем всплытие событий: клик на любом вложенном элементе всплывает до root, где мы его перехватываем.

Основные моменты:

• event.target - элемент, на котором произошел клик (может быть вложенным, например span внутри div)
• closest('div') - поднимается по дереву до первого родительского div, включая сам элемент
• Проверка id через event.target.id или event.target.closest('div').id
• Важно отличать прямой клик на div от клика на вложенный элемент

Для надежности используем closest('div') и проверяем, что результат существует и имеет id. Это покрывает случаи, когда клик пришелся на дочерний элемент внутри div.

На практике

JAVASCRIPT
const root = document.getElementById('root');

root.addEventListener('click', (event) => {
  const targetDiv = event.target.closest('div');
  
  if (targetDiv && targetDiv.id) {
    console.log(targetDiv.id);
  }
});

Альтернативный вариант без closest, с проверкой tagName:

JAVASCRIPT
root.addEventListener('click', (event) => {
  let target = event.target;
  
  while (target && target !== root) {
    if (target.tagName === 'DIV' && target.id) {
      console.log(target.id);
      break;
    }
    target = target.parentElement;
  }
});

Для современных проектов с React или Vue делегирование обычно не нужно - фреймворки сами управляют событиями. Но в чистом JavaScript это оптимальный подход.

Как отвечать на собеседовании

Начни с ключевой идеи - делегирование событий. Объясни, почему это лучше, чем вешать обработчик на каждый div: производительность, работа с динамическими элементами, чистота кода. Покажи понимание разницы между event.target и event.currentTarget. Упомяни, что closest - современный метод, но для старых браузеров нужна полифилльная реализация через цикл. Добавь, что в реальных проектах часто используют библиотеки или фреймворки, но понимание нативного механизма важно для отладки и оптимизации.

Что проверяет интервьюер

• Понимание event delegation и всплытия событий
• Умение работать с DOM-навигацией (closest, parentElement)
• Знание разницы между target и currentTarget
• Способность учесть краевые случаи (клик на вложенный элемент, отсутствие id)
• Понимание trade-off между производительностью и читаемостью кода

Типичные ошибки

• Использование event.target.id без проверки, что target - это div (клик на span внутри div вернет undefined)
• Забывают про closest и пишут сложные циклы с проверкой parentElement
• Вешают обработчик на document, а не на root, что может ловить клики вне нужной области
• Не проверяют существование id перед выводом в консоль
• Используют stopPropagation, ломая делегирование для других обработчиков