← Все сеты

DOM и события: мини-проекты

Практика на реальном UI: формы, обработка событий, обновление интерфейса и базовая валидация.

Уровень: BeginnerОценка времени: 100 мин

Цели сета

  • Понимать, как устроены события и всплытие
  • Уметь собирать интерактивные формы
  • Писать чистый DOM-код без лишних перерисовок

Что ты сделаешь в сете

  • Сделать форму регистрации с валидацией onInput и onSubmit.
  • Реализовать делегирование событий для списка задач.
  • Добавить drag and drop сортировку элементов с сохранением порядка.
  • Собрать модальное окно с корректным управлением фокусом.

Рекомендуемые уроки

Что должно получиться на выходе

  • Мини-проект интерфейса с несколькими интерактивными сценариями.
  • README с картой событий и объяснением архитектуры обработчиков.
  • Скринкаст или gif с демонстрацией сценариев.

Критерии готовности

  • Все элементы интерфейса доступны с клавиатуры.
  • Логика событий предсказуемая: нет случайных double-submit и дублей обработчиков.
  • Нет утечек: обработчики снимаются при удалении элементов.

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

  • Вешать отдельный обработчик на каждый элемент вместо делегирования.
  • Не учитывать bubbling/capturing и получать неожиданные срабатывания.
  • Забывать про предотвращение default-действий в формах.

Что положить в портфолио

Добавь в портфолио интерактивный модуль (форма + список + модалка) и распиши, как решены события, доступность и структура кода.

FAQ по этому сету

Сколько времени закладывать на сет «DOM и события: мини-проекты»?

Ориентир: 100 минут. Лучше разделить прохождение на 2-3 подхода с обязательным разбором ошибок.

Как понять, что сет пройден качественно?

Оцени себя по критериям готовности: код стабилен, edge-cases закрыты, решения читаемы и объяснимы на собеседовании.

Что добавить в портфолио после выполнения сета?

Добавь в портфолио интерактивный модуль (форма + список + модалка) и распиши, как решены события, доступность и структура кода.

© 2026 Road to JS · ИП Добрынина Екатерина Владимировна

ИНН 482425719598 · ОГРНИП 326480000011329 · qamos@bk.ru