Урок 4 по jQuery для начинающих: Обработка событий

13.01.2026 Автор: Максим Габов написал в рубрике Уроки по JQuery. 0 Комментариев.

Мы уже научились находить элементы на странице и манипулировать ими. Но настоящая веб-разработка начинается тогда, когда наши страницы начинают реагировать на действия пользователя. Нажимает ли он кнопку, двигает мышью, вводит текст или отправляет форму, всё это события. И сегодня, в этом четвертом уроке, мы будем учиться тому, как заставить наш код «прислушиваться» к этим событиям и реагировать на них. Мы подробно разберем основы, самые популярные типы событий, таинственный объект event и закрепим все на практике, создав свое всплывающее окно.

Основы обработки событий: .on(‘click’, …), .click()

Любое взаимодействие пользователя с браузером порождает событие. Наша задача «привязать» к этому событию обработчик, то есть функцию, которая выполнится, когда событие произойдет. jQuery предлагает несколько простых и элегантных способов сделать это.

Долгое время «золотым стандартом» был метод .on(). Это самый универсальный и мощный инструмент в нашем арсенале. Его базовый синтаксис выглядит так: $(селектор).on('тип_события', функция). Давайте сразу посмотрим на примере. Допустим, у нас есть кнопка с id="myButton" и мы хотим выводить сообщение в консоль при ее нажатии.

$('#myButton').on('click', function() {
  console.log('Кнопка была нажата!');
});

Всё очень просто: мы находим кнопку, вешаем на нее обработчик события click и передаем анонимную функцию, которая содержит код, который нужно выполнить. Вместо анонимной функции можно передать и заранее объявленную именованную функцию, что часто удобно для лучшей структуризации кода.

Помимо .on(), существует множество методов-сокращений для самых частых событий. Самый популярный из них, это .click(). Предыдущий пример можно переписать так:

$('#myButton').click(function() {
  console.log('Кнопка была нажата!');
});

Выглядит еще короче и понятнее, не так ли? Аналогичные методы есть для mouseenter, keypress и других событий (.mouseenter(), .keypress()). Почему же тогда я начал рассказ с .on()? Дело в гибкости и мощности. Метод .on() позволяет делать вещи, недоступные для методов-сокращений. Самое главное это делегирование событий. Представьте, что вы dynamically добавляете новые кнопки в список после загрузки страницы. Обработчики, повешенные через .click() на эти кнопки напрямую, не сработают, так как они добавляются позже. А вот .on() с делегированием справится с этой задачей идеально.

Синтаксис делегирования: $(статический_родитель).on('событие', 'динамический_элемент', функция). Например:

$('#staticList').on('click', '.dynamicButton', function() {
  console.log('Динамическая кнопка нажата!');
});

Здесь мы вешаем обработчик на статичный родительский элемент с id="staticList", но указываем, что он должен срабатывать только тогда, когда событие произошло на элементе с классом dynamicButton, даже если тот был добавлен после загрузки страницы. Это крайне важный и полезный паттерн, который решает множество проблем в динамических интерфейсах.

Практическая задача 1: Создайте HTML-страницу с тремя кнопками. Используя метод .on(), сделайте так, чтобы при нажатии на каждую кнопку в консоль выводился ее порядковый номер (например, «Нажата кнопка 1»). Затем попробуйте добавить четвертую кнопку через JavaScript после загрузки страницы ($('body').append('<button>Кнопка 4</button>')) и убедитесь, что на нее обработчик не реагирует. Теперь перепишите код, используя делегирование событий (вешайте обработчик на body или на статичный контейнер) и убедитесь, что новая кнопка тоже работает.

Популярные типы событий: click, mouseenter, mouseleave, keypress, submit

Браузер генерирует десятки различных типов событий. Мы не будем разбирать все, а сосредоточимся на самых популярных и полезных, которые понадобятся вам в 99% случаев.

click. Событие щелчка мышью. Король событий. Используется для кнопок, ссылок, карточек и любого элемента, на который можно «нажать». Мы его уже видели в предыдущих примерах.
mouseenter и mouseleave. Эти события происходят, когда курсор мыши наводится на элемент и покидает его. Идеально подходят для создания различных эффектов при наведении, которые раньше делались на CSS через :hover. Например, можно плавно менять фон кнопки или показывать дополнительную информацию.
javascript
```
$('.menu-item').on('mouseenter', function() {
  $(this).css('background-color', 'lightblue');
}).on('mouseleave', function() {
  $(this).css('background-color', 'transparent');
});
```
Обратите внимание на $(this). Внутри функции-обработчика this указывает на DOM-элемент, с которым произошло событие. Мы оборачиваем его в jQuery-объект $(this), чтобы иметь возможность использовать методы jQuery.
keypress, keydown, keyup. Эта группа событий связана с нажатием клавиш на клавиатуре. Они часто используются в полях ввода.
- keydown срабатывает в момент нажатия клавиши.
- keyup срабатывает в момент отпускания клавиши.
- keypress срабатывает между ними (но он устарел и для большинства задач лучше использовать keydown).
Чаще всего их используют для реакции на конкретные клавиши, например, Enter (код 13).
javascript
```
$('#searchInput').on('keydown', function(event) {
  if (event.which === 13) { // 13 - код клавиши Enter
    performSearch(); // Вызываем функцию поиска
  }
});
```
Здесь мы видим первый намек на объект события event, который мы детально разберем в следующем разделе. Свойство event.which содержит код нажатой клавиши.
submit. Это событие формы. Оно происходит при попытке отправить форму (нажатие на кнопку с type="submit" или нажатие Enter в одном из ее полей). Самое распространенное использование, это валидация формы перед отправкой на сервер (так называемая валидация на стороне клиента) и отмена стандартного поведения браузера (перезагрузки страницы).
javascript
```
$('#myForm').on('submit', function(event) {
  // Проверяем, заполнено ли поле email
  if ($('#email').val() === '') {
    alert('Пожалуйста, введите email!');
    event.preventDefault(); // Отменяем отправку формы
  }
  // Иначе форма отправится стандартным образом
});
```

Практическая задача 2: Создайте блок div с каким-нибудь текстом. Реализуйте следующее поведение:

При наведении курсора мыши (mouseenter) блок должен увеличиваться в размерах (например, width: 300px; height: 300px;) и менять цвет фона.
При уходе курсора (mouseleave) блок должен возвращаться к исходным размерам и цвету.
Добавьте на страницу текстовое поле input. Сделайте так, чтобы при вводе текста в это поле его значение динамически выводилось в созданном вами блоке div (используйте событие keyup и метод .text()).

Объект события event: что это такое и как использовать (event.preventDefault(), event.target)

Каждый раз, когда происходит событие, браузер создает специальный объект, который содержит всю информацию об этом событии. В jQuery этот объект передается в качестве первого аргумента в нашу функцию-обработчик. По традиции его называют e или event. Это ваш главный источник информации о том, что именно произошло.

Давайте посмотрим, как его использовать:

$('a').on('click', function(event) {
  console.log(event); // Посмотрим на весь объект в консоли
});

Если вы откроете консоль и нажмете на ссылку, то увидите огромный объект с массой свойств. Нам не нужно знать их все, но есть несколько ключевых:

event.preventDefault(). Это самый основной метод. Он останавливает стандартное поведение браузера. Что это значит? Например, при клике на ссылку <a href="..."> браузер по умолчанию переходит по указанному адресу. При отправке формы страница перезагружается. preventDefault() отменяет это поведение, передавая полный контроль вам. Это незаменимо для создания одностраничных приложений (SPA) и кастомных обработчиков форм.
javascript
```
$('a.popup-link').on('click', function(event) {
  event.preventDefault(); // Не переходить по ссылке
  var url = $(this).attr('href'); // Берем URL из атрибута href
  openPopup(url); // Открываем попап с этим URL (какая-то ваша функция)
});
```
event.target. Это свойство содержит исходный DOM-элемент, который инициировал событие. Вспомните делегирование событий: событие «всплывает» от кнопки к ее родителю, но event.target всегда будет указывать на саму кнопку. Это очень полезно, когда один обработчик вешается на несколько элементов (например, на все кнопки в списке).
javascript
```
$('#buttonContainer').on('click', function(event) {
  // event.target - это конкретная кнопка, на которую кликнули
  console.log('Была нажата кнопка с текстом:', $(event.target).text());
});
```
event.currentTarget. В отличие от event.target, который указывает на элемент, который вызвал событие, currentTarget указывает на элемент, к которому привязан обработчик. В примере выше с делегированием, event.currentTarget будет указывать на #buttonContainer, а event.target на конкретную кнопку внутри него. Часто внутри обработчика this равен именно event.currentTarget.
event.stopPropagation(). Этот метод останавливает «всплытие» события. События в DOM движутся от целевого элемента вверх по дереву к корню. Если у родителя тоже есть обработчик на это же событие, он сработает. stopPropagation() предотвращает это, останавливая событие на текущем элементе.

Практическая задача 3: Создайте несколько вложенных div (например, три div друг в друге). Навешайте на каждый из них обработчик события click, который выводит в консоль что-то вроде «Клик по внутреннему блоку». Убедитесь, что при клике на самый внутренний блок в консоли появляется три сообщения (из-за всплытия). Теперь модифицируйте код самого внутреннего блока, добавив в его обработчик event.stopPropagation(). Убедитесь, что теперь событие не доходит до родительских элементов.

Создаем всплывающее окно (popup) по клику на кнопку

Давайте соберем все полученные знания воедино и создадим классический элемент интерфейса, это всплывающее окно (popup), которое появляется по клику на кнопку и закрывается по клику на крестик или на затемненную область вокруг.

Шаг 1: Создаем HTML-структуру

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>jQuery Popup</title>
    <style>
        /* Стили для затемненного фона */
        #overlay {
            display: none; /* Скрыт по умолчанию */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
        }
        /* Стили для самого попапа */
        #popup {
            display: none; /* Скрыт по умолчанию */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            padding: 20px;
            background: white;
            border-radius: 5px;
            z-index: 1000;
        }
        /* Стили для кнопки закрытия */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <!-- Кнопка для открытия попапа -->
    <button id="openPopup">Открыть окно</button>

    <!-- Затемненный фон -->
    <div id="overlay"></div>

    <!-- Само всплывающее окно -->
    <div id="popup">
        <span class="close-btn">&times;</span>
        <h2>Привет, это попап!</h2>
        <p>Вы создали его с помощью jQuery. Поздравляю!</p>
    </div>

    <!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        // Здесь будет наш JavaScript код
    </script>
</body>
</html>

Шаг 2: Пишем jQuery-код для логики

Помещаем следующий код внутрь тега <script>.

$(document).ready(function() {

    // 1. Обработчик для кнопки "Открыть попап"
    $('#openPopup').on('click', function() {
        $('#overlay, #popup').fadeIn(300); // Плавно показываем фон и попап
    });

    // 2. Обработчик для кнопки закрытия (крестик)
    $('.close-btn').on('click', function() {
        $('#overlay, #popup').fadeOut(300); // Плавно скрываем фон и попап
    });

    // 3. Обработчик для клика на затемненный фон (оверлей)
    $('#overlay').on('click', function(event) {
        // Проверяем, что кликнули именно по оверлею, а не по его детям (попапу)
        if (event.target === this) {
            $('#overlay, #popup').fadeOut(300);
        }
    });

});

Разберем код:

Открытие. Мы находим кнопку #openPopup и вешаем на нее обработчик click. По клику мы одновременно плавно показываем (.fadeIn()) затемненный фон #overlay и само окно #popup.
Закрытие по крестику. На элемент с классом .close-btn вешаем обработчик, который скрывает (.fadeOut()) оба элемента.
Закрытие по фону. Это самая хитрая часть. Мы вешаем обработчик на сам #overlay. Но если внутри него находится #popup, то клик по попапу тоже будет считаться кликом по оверлею (из-за всплытия). Чтобы окно не закрывалось при клике внутри него, мы используем проверку: if (event.target === this). event.target это элемент, по которому кликнули, а this это сам #overlay. Условие сработает только тогда, когда кликнули именно на фон, а не на его дочерний элемент (попап).

Практическая задача 4: Модифицируйте созданный попап.

Добавьте в него текстовое поле и кнопку «Сохранить».
Сделайте так, чтобы при нажатии на кнопку «Сохранить» значение из текстового поля выводилось в консоль, а попап автоматически закрывался.
Добавьте клавиатурную навигацию: попап должен закрываться при нажатии клавиши Esc (код 27). Для этого нужно повесить обработчик события keydown на $(document) и проверить код клавиши.

На этом наш четвертый урок подошел к концу. Сегодня вы разобрали от статичных страниц к интерактивным веб-приложениям. Вы научились ловить события, извлекать из них информацию и управлять поведением страницы. Это полезный навык для любого фронтенд-разработчика.

Обязательно выполните все практические задачи. Попробуйте создать что-то свое, например выпадающее меню, слайдер, интерактивную галерею. Всё это строится на основе событий.

Если вы хотите пройти полный курс с нуля и стать уверенным в jQuery, чтобы свободно создавать динамичные и современные веб-интерфейсы, жду вас на полном курсе по jQuery для начинающих.

Удачи в изучении и до встречи в следующем уроке, где мы добавим нашим сайтам плавности и динамики с помощью эффектов и анимации в jQuery.

Поддержать автора блога

Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.