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

Простой список задач

Цель работы:

Закрепить навыки работы с DOM (поиск элементов, создание/удаление/изменение узлов, манипуляция атрибутами и классами).
Закрепить навыки обработки событий (подписка, отмена поведения, делегирование).
Создать полноценное, но простое приложение “Список задач”, используя исключительно пройденный материал.

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

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

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

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

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

element.addEventListener(event, handler, options);

event: Строка, содержащая имя события (например, 'click', 'submit').
handler: Функция, которая будет вызвана при наступлении события.

Объект `event`

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

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

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

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

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

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

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

Для назначения обработчиков использовать только метод element.addEventListener().
Обязательно использовать свойства event.target и/или метод event.preventDefault() в соответствующих заданиях.
Для управления видимостью и состоянием элементов использовать CSS-классы, а не прямое изменение свойства style.display.
Все обработчики должны быть реализованы через делегирование событий там, где это возможно (например, для списка задач).

Задание. Простой список задач (To-Do List)

Описание: Создайте простое приложение со списком задач. Каждая задача имеет:

название;
статус: в работе или выполнено.

Требуемый функционал:

Добавление задачи через форму с одним полем «Название».
Удаление задачи — кнопка рядом с каждой задачей.
Изменение статуса — по клику на задачу меняется статус (например, через переключение класса).
Фильтрация по статусу — реализовать возможность показать:
- все задачи,
- только «в работе»,
- только «выполнено».
Редактирование названия — по двойному клику задача превращается в поле ввода, нажатие Enter сохраняет изменения.

Ограничения (Ключевые требования):

Не использовать: localStorage, setTimeout, setInterval.
Только чистый JavaScript: работа с DOM и событиями.
Все данные хранятся только в DOM-структуре (в памяти).

Минимальная HTML‑структура:

<div id="controls">
  <input id="taskInput" placeholder="Новая задача">
  <button id="addBtn">Добавить</button>

  <select id="filter">
    <option value="all">Все</option>
    <option value="active">В работе</option>
    <option value="done">Выполнено</option>
  </select>
</div>

<ul id="taskList"></ul>

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

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