> Как определить элемент, по которому был произведен клик при делегировании событий в JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Exness

Стек: JavaScript

> Пример ответа

При делегировании событий в JavaScript для определения элемента, по которому был произведен клик, используется свойство event.target. Оно возвращает самый вложенный элемент, на котором произошло событие, в отличие от event.currentTarget, который указывает на элемент, к которому привязан обработчик.

Пример:

JAVASCRIPT
document.getElementById('parent').addEventListener('click', function(event) {
  const clickedElement = event.target; // Элемент, по которому кликнули
  console.log('Кликнут элемент:', clickedElement.tagName);
  
  // Проверка, является ли кликнутый элемент нужным (например, кнопкой)
  if (clickedElement.matches('.my-button')) {
    console.log('Клик по кнопке с классом my-button');
  }
});

Если нужно получить ближайший элемент с определенным селектором (например, при клике на дочерний элемент внутри контейнера), используйте closest():

JAVASCRIPT
document.getElementById('list').addEventListener('click', function(event) {
  const listItem = event.target.closest('li');
  if (listItem) {
    console.log('Кликнут элемент списка:', listItem.textContent);
  }
});

Важно: event.target может быть любым вложенным элементом (например, <span> внутри <li>), поэтому closest помогает найти родительский элемент с нужным селектором.