События в JavaScript: addEventListener, всплытие, делегирование, throttle и debounce

const button = document.querySelector('.btn')

button.addEventListener('click', (event) => {
  console.log('Клик!', event.target)
})

element.addEventListener('click', handler, {
  once: true,      // сработает один раз и отпишется
  capture: false,  // фаза погружения (объяснение ниже)
  passive: true,   // обработчик не вызовет preventDefault (оптимизация скролла)
})

function handleClick(event) {
  console.log('Клик')
}

button.addEventListener('click', handleClick)
button.removeEventListener('click', handleClick) // работает

// Анонимную функцию удалить нельзя
button.addEventListener('click', () => console.log('клик'))
button.removeEventListener('click', () => console.log('клик')) // НЕ работает — другая функция

element.addEventListener('click', (event) => {
  event.type          // 'click'
  event.target        // элемент, на котором произошло событие
  event.currentTarget // элемент, на котором висит обработчик
  event.timeStamp     // время события (мс с загрузки страницы)
})

element.addEventListener('click', (event) => {
  event.clientX  // X относительно окна
  event.clientY  // Y относительно окна
  event.pageX    // X относительно документа
  event.pageY    // Y относительно документа
  event.button   // 0 = левая, 1 = средняя, 2 = правая
})

document.addEventListener('keydown', (event) => {
  event.key      // 'a', 'Enter', 'Escape', 'ArrowUp'
  event.code     // 'KeyA', 'Enter', 'Escape', 'ArrowUp'
  event.ctrlKey  // Ctrl нажат?
  event.shiftKey // Shift нажат?
  event.altKey   // Alt нажат?
  event.metaKey  // Meta (Cmd на Mac) нажат?
})

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault() // не даём браузеру сохранить страницу
    saveDocument()
  }
})

<div class="card">
  <button class="btn">Кликни</button>
</div>

document.querySelector('.card').addEventListener('click', () => {
  console.log('Клик на card')
})

document.querySelector('.btn').addEventListener('click', () => {
  console.log('Клик на button')
})

document.querySelector('.card').addEventListener('click', (event) => {
  event.target         // элемент, по которому реально кликнули (кнопка)
  event.currentTarget  // элемент, на котором висит обработчик (card)
})

document.querySelector('.btn').addEventListener('click', (event) => {
  event.stopPropagation() // card не получит событие
  console.log('Только button')
})

Погружение:  document → html → body → div.card → button
Цель:        button (событие сработало)
Всплытие:    button → div.card → body → html → document

element.addEventListener('click', handler, true)
// или
element.addEventListener('click', handler, { capture: true })

<ul class="menu">
  <li data-action="home">Главная</li>
  <li data-action="tasks">Задачи</li>
  <li data-action="profile">Профиль</li>
  <li data-action="logout">Выход</li>
</ul>

document.querySelector('.menu').addEventListener('click', (event) => {
  const item = event.target.closest('li')
  if (!item) return

  const action = item.dataset.action
  if (!action) return

  switch (action) {
    case 'home': showHome(); break
    case 'tasks': showTasks(); break
    case 'profile': showProfile(); break
    case 'logout': logout(); break
  }
})

// Не переходить по ссылке
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault()
  console.log('Переход отменён')
})

// Не отправлять форму
document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault()
  const formData = new FormData(event.target)
  sendData(formData)
})

// Кастомное контекстное меню
element.addEventListener('contextmenu', (event) => {
  event.preventDefault()
  showCustomMenu(event.pageX, event.pageY)
})

function throttle(fn, delay) {
  let lastCall = 0

  return function (...args) {
    const now = Date.now()
    if (now - lastCall >= delay) {
      lastCall = now
      fn.apply(this, args)
    }
  }
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll position:', window.scrollY)
}, 200))

function debounce(fn, delay) {
  let timeoutId

  return function (...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

const searchInput = document.querySelector('#search')
searchInput.addEventListener('input', debounce((event) => {
  searchUsers(event.target.value)
}, 300))

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM загружен')
})