/
Вопросы и ответы
/
JavaScript
/

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

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

3 года назад

Andrey Moshkov

Ответы

1

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, либо как его родитель.

3 года назад

Aleksey

+7 800 100 22 47

бесплатно по РФ

+7 495 085 21 62

бесплатно по Москве

108813 г. Москва, вн.тер.г. поселение Московский,
г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3
ОГРН 1217300010476
ИНН 7325174845