> Как проверить тег элемента в обработчике события клика в JavaScript (JavaScript)

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

В обработчике события клика тег элемента проверяется через свойство event.target.tagName. Это свойство возвращает имя тега в верхнем регистре (например, DIV, BUTTON). Для надёжности сравнение делают после приведения к одному регистру: event.target.tagName === 'BUTTON'. Если нужна проверка на вложенные элементы, используют event.currentTarget.closest(selector).

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

При клике событие всплывает от event.target (элемент, на котором произошёл клик) до event.currentTarget (элемент, на котором висит обработчик). Проверка tagName на event.target даёт фактический кликнутый элемент, а не тот, где висит обработчик. Это критично, если внутри контейнера есть дочерние элементы (например, иконки или спаны внутри кнопки).

Для надёжного определения, кликнули ли по нужному элементу или его потомку, используют event.target.closest('.selector') или event.currentTarget.contains(event.target). closest ищет ближайшего предка, соответствующего селектору, включая сам элемент.

На практике

В реальных проектах редко проверяют только tagName - обычно нужна проверка на конкретный класс, data-атрибут или роль. Для делегирования событий на динамические элементы используют closest. Если обработчик висит на родителе, а клик по потомку, event.target.tagName может не совпасть с ожидаемым.

Пример кода

JAVASCRIPT
// Простая проверка тега
document.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log('Клик по кнопке');
  }
});

// Надёжная проверка с учётом вложенности
document.querySelector('.menu').addEventListener('click', (event) => {
  const menuItem = event.target.closest('.menu-item');
  if (menuItem) {
    console.log('Клик по пункту меню', menuItem.dataset.id);
  }
});

// Проверка через contains для сложных случаев
document.querySelector('.card').addEventListener('click', (event) => {
  if (event.currentTarget.contains(event.target)) {
    console.log('Клик внутри карточки');
  }
});

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

Начни с прямого ответа про tagName, затем сразу переходи к нюансам: разница между target и currentTarget, всплытие событий, проблема вложенных элементов. Покажи понимание делегирования событий и использования closest. Упомяни, что в продакшене чаще проверяют не тег, а селектор или data-атрибут. Если спросят про производительность - скажи, что tagName быстрее closest, но разница заметна только на тысячах элементов.

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

Интервьюер оценивает понимание event propagation (всплытие/погружение), различие между target и currentTarget, умение работать с DOM-методами (closest, contains, matches). Также проверяется знание типичных проблем (клик по иконке внутри кнопки) и способность выбрать правильный подход под конкретную задачу.

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

• Использование event.target.tagName без учёта регистра (сравнение с 'button' вместо 'BUTTON').
• Путаница между event.target и event.currentTarget - проверка тега на родителе вместо фактического элемента.
• Игнорирование вложенных элементов: проверка tagName на кнопке, но клик пришёлся на <span> внутри неё.
• Избыточное использование closest там, где достаточно простой проверки tagName (например, когда точно нет вложенности).