Как отследить клик по элементу?
DOM и браузер
Клик по элементу отслеживают через `addEventListener('click', handler)` на элементе или делегированием на родителе. В React — проп `onClick`.
addEventListener
const element = document.querySelector('.item');
element.addEventListener('click', (event) => {
console.log('Клик по', event.target);
});Делегирование (для многих элементов)
Один обработчик на родителе (через всплытие) отслеживает клики по потомкам:
container.addEventListener('click', (e) => {
const item = e.target.closest('.item');
if (item) {
console.log('Клик по элементу', item.dataset.id);
}
});Работает и для динамически добавленных элементов.
В React
<div onClick={() => handleClick(item.id)}>{item.name}</div>Объект события
element.addEventListener('click', (e) => {
e.target; // где кликнули
e.currentTarget; // где обработчик
e.clientX, e.clientY; // координаты
e.stopPropagation(); // остановить всплытие
e.preventDefault(); // отменить действие
});Снятие
element.removeEventListener('click', handler); // та же ссылкаДругие клик-события
dblclick— двойной клик.contextmenu— правый клик.mousedown/mouseup— нажатие/отпускание.
Коротко для собеседования
Клик по элементу отслеживают element.addEventListener('click', handler) или делегированием на родителе (через всплытие, e.target.closest() — для многих/динамических элементов). В React — onClick. В обработчике — event (target, координаты, stopPropagation, preventDefault). Снятие — removeEventListener с той же ссылкой.