События

События — это действия пользователя или браузера, на которые можно реагировать: клики, ввод текста, скролл и т.д.

addEventListener

const button = document.querySelector("#myBtn");

button.addEventListener("click", function() {
  console.log("Кнопка нажата!");
});

// Со стрелочной функцией
button.addEventListener("click", () => {
  console.log("Клик!");
});

Популярные события

Мышь

element.addEventListener("click", handler);      // Клик
element.addEventListener("dblclick", handler);   // Двойной клик
element.addEventListener("mouseenter", handler); // Курсор вошёл
element.addEventListener("mouseleave", handler); // Курсор ушёл

Клавиатура

input.addEventListener("keydown", handler);  // Клавиша нажата
input.addEventListener("keyup", handler);    // Клавиша отпущена
input.addEventListener("input", handler);    // Ввод текста

Формы

form.addEventListener("submit", handler);   // Отправка формы
input.addEventListener("focus", handler);   // Фокус получен
input.addEventListener("blur", handler);    // Фокус потерян
input.addEventListener("change", handler);  // Значение изменилось

Объект события (event)

button.addEventListener("click", function(event) {
  console.log(event.target);        // Элемент, на котором событие
  console.log(event.type);          // Тип события ("click")
  console.log(event.clientX);       // Координаты курсора
  
  event.preventDefault();           // Отменить действие по умолчанию
  event.stopPropagation();          // Остановить всплытие
});

Обработка формы

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // Отменяем перезагрузку страницы
  
  const name = document.querySelector("#name").value;
  const email = document.querySelector("#email").value;
  
  console.log("Отправлено:", name, email);
});

Итоги курса

Поздравляем! Вы изучили основы JavaScript:

• Переменные и типы данных
• Условия и циклы
• Функции
• Работа с DOM
• Обработка событий

Что дальше: Практикуйтесь! Создавайте небольшие проекты — калькулятор, список задач, игру. Это лучший способ закрепить знания.