В чем разница между scroll и click?

В чем разница между scroll и click?

Это два разных события в браузере, которые обрабатывают разные типы взаимодействия пользователя с веб-страницей.

Что такое click?

Click (клик) — это событие, которое возникает, когда пользователь нажимает на элемент (обычно левой кнопкой мыши) и отпускает её. Это точечное действие, сфокусированное на конкретном элементе.

// Прослушивание события click
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
  console.log('Кнопка нажата!');
  event.target; // Элемент, на который нажали
});

// Click может быть на любом элементе
document.addEventListener('click', (event) => {
  console.log('Клик на странице', event.target);
});

Что такое scroll?

Scroll (прокрутка) — это событие, которое возникает, когда пользователь прокручивает страницу (или элемент с overflow). Это непрерывное действие, которое может срабатывать много раз подряд.

// Прослушивание события scroll
window.addEventListener('scroll', (event) => {
  console.log('Страница прокручена!');
  console.log('scrollY:', window.scrollY); // Высота прокрутки
});

// Scroll на конкретном элементе
const container = document.querySelector('.scroll-container');
container.addEventListener('scroll', () => {
  console.log('scrollTop:', container.scrollTop);
});

Ключевые различия

Практические примеры

Click — взаимодействие с элементом

// Пример 1: Toggle видимости при клике
const toggleButton = document.querySelector('#toggle');
const menu = document.querySelector('.menu');

toggleButton.addEventListener('click', () => {
  menu.classList.toggle('hidden');
});

// Пример 2: Отправка формы при клике
const submitButton = document.querySelector('form button');
submitButton.addEventListener('click', async () => {
  const formData = new FormData(document.querySelector('form'));
  const response = await fetch('/api/submit', {
    method: 'POST',
    body: formData,
  });
});

// Пример 3: Фильтрация по клику
const filterButtons = document.querySelectorAll('[data-filter]');
filterButtons.forEach(button => {
  button.addEventListener('click', (e) => {
    const filter = e.target.dataset.filter;
    applyFilter(filter);
  });
});

Scroll — отслеживание позиции

// Пример 1: Sticky header при скролле
window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

// Пример 2: Infinite scroll (загрузка при достижении конца)
window.addEventListener('scroll', () => {
  const threshold = 500; // px от конца
  const remainingHeight = document.documentElement.scrollHeight - 
                          (window.scrollY + window.innerHeight);
  
  if (remainingHeight < threshold) {
    loadMoreProducts();
  }
});

// Пример 3: Прогресс-бар при скролле
window.addEventListener('scroll', () => {
  const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (window.scrollY / totalHeight) * 100;
  
  document.querySelector('.progress-bar').style.width = progress + '%';
});

Обработка click в разных сценариях

// Делегирование событий (работает для множества элементов)
document.addEventListener('click', (event) => {
  if (event.target.matches('.delete-btn')) {
    deleteItem(event.target.dataset.id);
  }
});

// Двойной клик (dblclick)
document.addEventListener('dblclick', () => {
  console.log('Двойной клик!');
});

// Правый клик (contextmenu)
document.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // Отменить контекстное меню
  showCustomMenu(event.clientX, event.clientY);
});

Производительность

Click — низкая нагрузка

Click события срабатывают редко, поэтому не влияют на производительность:

button.addEventListener('click', heavyComputation);

Scroll — высокая нагрузка

Scroll может срабатывать 60+ раз в секунду. Нужна оптимизация:

// Плохо: срабатывает при каждом пикселе
window.addEventListener('scroll', () => {
  updateDOM(); // Дорого!
});

// Хорошо: используем throttle
function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  updateDOM();
}, 100)); // Максимум каждые 100ms

Или используй Intersection Observer (лучше для отслеживания видимости):

// Современный подход вместо scroll
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreProducts();
    }
  });
});

observer.observe(document.querySelector('.load-more-trigger'));

Заключение

Click — это событие клика на конкретный элемент, используется для интерактивности (кнопки, ссылки, фильтры).

Scroll — это событие прокрутки страницы/контейнера, используется для отслеживания позиции пользователя (sticky headers, infinite scroll, прогресс).

Выбирайте правильное событие в зависимости от того, что вы хотите отследить: взаимодействие пользователя (click) или его положение на странице (scroll).