📘 Урок 7: События в jQuery — `click()`, `submit()`, `hover()`, `on()` и делегирование

Цель: освоить систему событий в jQuery. Научимся реагировать на действия пользователя — клики, отправку форм, наведение мыши, ввод текста. Разберём, как использовать делегирование и снимать события.

---

🔹 Что такое событие?

Событие — это любое действие пользователя на веб-странице:

• клик мышью,

• наведение,

• нажатие клавиш,

• отправка формы,

• изменение значения и т. д.

С помощью jQuery ты можешь вешать обработчики на эти события и выполнять нужные действия.

---

🔸 Основные методы

Метод	Назначение
click()	Обработка клика
submit()	Отправка формы
change()	Изменение значения
focus()	Элемент в фокусе
blur()	Потеря фокуса
hover()	Наведение и уход мыши
keydown()	Нажатие клавиши
on()	Назначение любых событий
off()	Снятие событий

---

🔸 click()

Самый часто используемый метод.

$('#btn').click(function() {
  alert('Кнопка нажата');
});

📌 Или коротко через стрелочную функцию:

$('#btn').click(() => alert('Нажал!'));

---

🔸 submit()

Применяется к формам:

$('form').submit(function(e) {
  e.preventDefault(); // отмена отправки
  alert('Форма отправлена!');
});

Важно: всегда вызывай e.preventDefault(), если не хочешь, чтобы форма перезагрузила страницу.

---

🔸 hover()

Обработка наведения и ухода мыши:

$('.card').hover(
  function() { $(this).addClass('hovered'); },
  function() { $(this).removeClass('hovered'); }
);

---

🔸 change(), focus(), blur()

change() — изменение значения:

$('#select').change(function() {
  alert('Вы выбрали: ' + $(this).val());
});

focus() — при фокусе:

$('input').focus(function() {
  $(this).css('background', '#ffffcc');
});

blur() — при потере фокуса:

$('input').blur(function() {
  $(this).css('background', '');
});

---

🔸 keydown(), keyup()

Отслеживание нажатий клавиш:

$(document).keydown(function(e) {
  console.log('Нажата клавиша: ' + e.key);
});

---

🔸 Метод .on()

Метод .on() — универсальный способ назначения событий.

$('#btn').on('click', function() {
  alert('Клик через .on()');
});

---

🔸 Делегирование событий

Очень важно при работе с динамическими элементами.

$('#list').on('click', 'li', function() {
  alert('Вы нажали на пункт');
});

Почему это нужно?

• При прямом назначении $('li').click(...) — новые элементы не получат обработчик.

• При делегировании через .on() родитель #list будет слушать клики по любому появившемуся в будущем li.

---

📌 Пример:

<ul id="list">
  <li>Первый</li>
</ul>
<button id="add">Добавить пункт</button>

<script>
  $('#list').on('click', 'li', function() {
    $(this).toggleClass('active');
  });

  $('#add').click(function() {
    $('#list').append('<li>Новый</li>');
  });
</script>

---

🔸 Снятие событий — off()

Иногда нужно удалить обработчик:

$('#btn').off('click');

Или:

function sayHi() { alert('Привет!'); }
$('#btn').on('click', sayHi);
$('#btn').off('click', sayHi);

---

🔸 Передача данных в обработчик

Можно передать объект с данными:

$('#btn').on('click', {msg: 'Привет, мир'}, function(e) {
  alert(e.data.msg);
});

---

🔸 У события есть объект — event

Пример:

$('#link').click(function(e) {
  e.preventDefault(); // отменить переход
  console.log(e.target); // элемент, по которому кликнули
});

---

📋 Практические задания

1. Сделай кнопку, при клике на которую появляется скрытый блок.

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

3. Добавь поле ввода, которое меняет цвет при фокусе.

4. Сделай форму с submit, которая не перезагружает страницу.

5. При нажатии на любую клавишу в textarea — выводи количество символов.

---

❗ Частые ошибки

❌ Назначение события на элемент, который ещё не существует

✅ Используй делегирование:

$('#parent').on('click', '.child', function() {
  // ...
});

---

❌ Забыли e.preventDefault() в форме

Результат — перезагрузка страницы.

---

❌ Несколько одинаковых обработчиков

Если ты несколько раз вызываешь .on('click'), то они будут срабатывать все. Решение — .off() или не дублировать.

---

📌 Заключение

jQuery делает работу с событиями наглядной и лаконичной. События — основа любого интерактивного интерфейса: всё начинается с кликов, наведения, ввода и отправки форм.