Практическая работа №9

Обработка событий (Events)

Цель работы:

• Освоить механизм обработки событий в браузере.
• Научиться использовать метод addEventListener() для назначения обработчиков.
• Понять, как работает объект event и его ключевые свойства, такие как event.target.
• Изучить методы управления поведением браузера, в частности event.preventDefault().

---

Основные теоретические положения

Механизм событий

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

Назначение обработчиков

Самый современный и рекомендуемый способ назначения обработчика — это метод addEventListener().

element.addEventListener(event, handler, options);

• event: Строка, содержащая имя события (например, 'click', 'mouseover', 'submit').
• handler: Функция, которая будет вызвана при наступлении события.
• options: Необязательный объект с дополнительными параметрами (например, once: true для однократного срабатывания).

Объект event

При вызове обработчика браузер передает ему специальный объект event (или e), который содержит информацию о произошедшем событии.

• event.target: Ссылка на элемент, на котором произошло событие. Это ключевое свойство для реализации делегирования событий.
• event.currentTarget: Ссылка на элемент, на котором установлен обработчик.
• event.type: Тип события (например, 'click').

Управление поведением

• event.preventDefault(): Отменяет стандартное действие браузера, связанное с событием. Например, предотвращает переход по ссылке при клике на <a> или отправку формы при клике на <button type="submit">.
• event.stopPropagation(): Останавливает всплытие события, предотвращая его достижение родительских элементов.

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

Делегирование — это прием, при котором обработчик устанавливается на один из родительских элементов, а не на каждый дочерний. Благодаря свойству event.target, обработчик может определить, на каком именно дочернем элементе произошло событие, и выполнить соответствующее действие. Это оптимизирует производительность и упрощает работу с динамически добавляемыми элементами.

---

Основные требования к практической работе

1. Использовать DOM-структуру, созданную в Практической работе №8.
2. Для назначения обработчиков использовать только метод element.addEventListener().
3. Обязательно использовать свойства event.target и/или метод event.preventDefault() в соответствующих заданиях.
4. Для управления видимостью и состоянием элементов использовать CSS-классы, а не прямое изменение свойства style.display.

---

Задания для выполнения

Выбор варианта: Номер варианта соответствует порядковому номеру студента в списке группы. Если количество студентов превышает 10, варианты повторяются по кругу (например, 11-й студент выполняет Вариант 1, 12-й - Вариант 2 и т.д.).

Вариант 1: Управление списком пользователей

База (из ПР №8, Вариант 1): Список пользователей

Задача:

1. Добавить кнопку “Удалить” рядом с именем каждого пользователя.
2. По клику на кнопку “Удалить” соответствующий элемент списка (<li>) должен быть удален из DOM.
3. Добавить обработчик клика на весь список (<ul>), который при клике на имя пользователя добавляет/удаляет класс user-selected (делегирование).

Вариант 2: Интерактивный каталог книг

База (из ПР №8, Вариант 2): Каталог книг

Задача:

1. Добавить кнопку “Подробнее” к каждой карточке книги.
2. По клику на “Подробнее” в карточке должен появиться или исчезнуть дополнительный параграф с текстом “Книга доступна в электронном формате”.
3. Добавить обработчик, который при наведении курсора на карточку книги добавляет ей класс card-hover (используя события mouseover и mouseout).

Вариант 3: Сортировка таблицы продуктов

База (из ПР №8, Вариант 3): Таблица продуктов

Задача:

1. Добавить обработчик клика на заголовок колонки “Цена” в таблице.
2. По клику таблица должна быть отсортирована по цене (по возрастанию/убыванию, переключаясь при каждом клике).
3. Дополнительно: Добавить кнопку “Сбросить сортировку”, которая возвращает таблицу к исходному порядку.

Вариант 4: Управление задачами

База (из ПР №8, Вариант 4): Список задач

Задача:

1. Добавить обработчик клика на текст каждой задачи.
2. По клику на текст задачи, ее статус должен переключаться между completed и pending (добавление/удаление класса completed).
3. Добавить внизу списка форму с полем ввода и кнопкой “Добавить задачу”. При отправке формы (используя event.preventDefault()) новая задача должна добавляться в список.

Вариант 5: Активное меню

База (из ПР №8, Вариант 5): Меню навигации

Задача:

1. Добавить обработчик клика на каждый пункт меню (<a>).
2. По клику:
   • Удалить класс active-link со всех элементов списка.
   • Добавить класс active-link только тому элементу, на который был совершен клик.
3. Использовать event.preventDefault() для предотвращения перехода по ссылке.

Вариант 6: Слайдер галереи

База (из ПР №8, Вариант 6): Галерея изображений

Задача:

1. Добавить две кнопки: “Предыдущее” и “Следующее” рядом с галереей.
2. По клику на “Следующее” должно отображаться следующее изображение, а текущее скрываться (управление классом hidden).
3. По клику на “Предыдущее” должно отображаться предыдущее изображение. Список должен быть циклическим.

Вариант 7: Форма добавления комментария

База (из ПР №8, Вариант 7): Список комментариев

Задача:

1. Добавить форму с полями “Имя автора” и “Текст комментария” перед списком комментариев.
2. При отправке формы:
   • Использовать event.preventDefault().
   • Получить данные из полей.
   • Создать новый элемент комментария и добавить его в начало списка.
   • Очистить поля формы.

Вариант 8: Калькулятор валют

База (из ПР №8, Вариант 8): Список валют

Задача:

1. Добавить поле ввода (<input type="number">) и кнопку “Рассчитать” над списком.
2. По клику на “Рассчитать” (или по событию input в поле):
   • Получить введенную сумму.
   • Для каждой валюты в списке отобразить рассчитанную сумму в этой валюте (например, “100 USD = 92.5 EUR”).

Вариант 9: Фильтрация фильмов по рейтингу

База (из ПР №8, Вариант 9): Рейтинг фильмов

Задача:

1. Добавить выпадающий список (<select>) с опциями: “Все”, “Рейтинг 8+”, “Рейтинг 5-”.
2. По событию change в выпадающем списке:
   • Скрыть все элементы списка фильмов.
   • Показать только те фильмы, которые соответствуют выбранному фильтру (используя атрибут data-rating).

Вариант 10: Поиск по сотрудникам

База (из ПР №8, Вариант 10): Профили сотрудников

Задача:

1. Добавить поле ввода (<input type="text">) с меткой “Поиск по имени” над списком сотрудников.
2. По событию keyup в поле ввода:
   • Получить введенный текст.
   • Скрыть все профили сотрудников, чье имя не содержит введенный текст (поиск должен быть регистронезависимым).
   • Показать только совпадающие профили.

---

Контрольные вопросы

1. Что такое событие в контексте браузера и как JavaScript позволяет на него реагировать?
2. В чем принципиальное отличие между назначением обработчика через element.onclick = function... и element.addEventListener('click', function...)?
3. Объясните, что такое всплытие событий (event bubbling).
4. Для чего используется свойство event.target и как оно помогает в делегировании событий?
5. В каких случаях необходимо вызывать метод event.preventDefault()? Приведите примеры.
6. Что такое делегирование событий и в чем его преимущество перед назначением обработчика каждому элементу?

---

Рекомендуемая литература

1. Основы событий (learn.javascript.ru)
2. Обработчики событий: addEventListener (learn.javascript.ru)
3. Объект Event (learn.javascript.ru)
4. Всплытие и погружение (learn.javascript.ru)
5. Делегирование событий (learn.javascript.ru)
6. event.preventDefault() (MDN)