> Зачем на обертке модального окна навешивать id и проверять таргет клика для закрытия модалки (JavaScript)

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

Использование id на обертке модального окна и проверка event.target позволяет реализовать закрытие по клику вне модалки (overlay click) без всплытия событий или лишних зависимостей. Это простой и надежный способ отличить клик по фону от клика по содержимому модального окна, не прибегая к сложной логике или сторонним библиотекам.

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

Механизм основан на том, что клик по любому элементу внутри модального окна всплывает до обертки. Если повесить обработчик клика на обертку и проверять event.target, то:

• Когда клик происходит по фону (overlay), event.target совпадает с оберткой - модалку можно закрыть.
• Когда клик происходит по содержимому (например, по кнопке или тексту), event.target будет внутренним элементом, а не оберткой - закрытие не происходит.

Использование id вместо класса или data-атрибута - это вопрос соглашения и простоты: id уникален, его легко получить через document.getElementById или прямо в обработчике. Однако на практике чаще используют классы или data-атрибуты, чтобы избежать конфликтов id при нескольких модалках на странице.

Альтернативные подходы:

• Проверка через event.currentTarget (всегда обертка) и event.target (исходный элемент) - работает без id.
• Использование stopPropagation на внутренних элементах - менее надежно, так как может сломать другие обработчики.
• Отдельный overlay-элемент с собственным обработчиком - более явный, но требует дополнительной разметки.

На практике

В реальных проектах id на обертке редко используют именно для этой проверки. Чаще применяют:

• data-атрибуты (например, data-overlay) для семантической ясности.
• Рефы в React/Vue для прямого сравнения с event.target.
• Библиотеки вроде react-modal, которые инкапсулируют эту логику.

Основной trade-off: проверка через id проста, но не масштабируется для вложенных модалок или сложных сценариев с порталами. В современных фреймворках предпочтительнее использовать рефы или контекст.

Пример кода

JAVASCRIPT
// Базовая реализация с id
const modal = document.getElementById('modal-overlay');

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    closeModal();
  }
});

JAVASCRIPT
// Более гибкий вариант с data-атрибутом
document.querySelector('[data-overlay]').addEventListener('click', (event) => {
  if (event.target.dataset.overlay !== undefined) {
    closeModal();
  }
});

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

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

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

• Понимание event delegation и всплытия событий в DOM.
• Умение различать event.target и event.currentTarget.
• Знание практических trade-off между простотой и масштабируемостью.
• Опыт работы с модальными окнами и overlay-кликами в реальных проектах.

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

• Использование event.target === event.currentTarget без понимания разницы - работает только если обработчик на обертке.
• Забывают, что при клике на дочерний элемент с stopPropagation проверка не сработает.
• Привязывают обработчик к document и проверяют id - это ломает инкапсуляцию и может вызвать баги с несколькими модалками.
• Путают id с классом и думают, что id обязателен - на самом деле можно использовать любой селектор.