PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Как отследить клик по элементу?

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 с той же ссылкой.

Другие вопросы раздела