Как работает метод target в js?

Аватар пользователя Aleksey
Aleksey
30 марта 2023

target является свойством объекта Event на котором произошло событие. Это свойство содержит ссылку на элемент/узел DOM-дерева:

const btn = document.querySelector('.button');

btn.addEventListener('click', (e) => {
  console.log(e.target === btn); // true
});

Часто можно встретить использование метода .closest() в подобных обработчиках. Это нужно для того, получить нужный элемент (кнопку), вместо других элементов. Если внутри кнопки будет другой вложенный элемент (например, <span>), то клик на нем отразится в содержимом свойства target, вместо ожидаемого btn.

Пример с .closest():

btn.addEventListener('click', (e) => {
  const targetButton = e.target.closest('button'); // (a)
  if (!targetButton) return; // завершить выполнение

  console.log(targetButton === btn); // true
});

В строке ( a ) мы использовали .closest() чтобы получить целевой элемент 'button', если он существует как e.target, либо как его родитель.

0 0
Познакомьтесь с основами JavaScript бесплатно

Похожие вопросы