Как работает метод target в js?
Ответы
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