Итоги

В этом уроке вы узнали, что:

• Обработчик получает объект события в качестве аргумента: function (event) { ... }. event.target — это элемент, на котором произошло событие, поэтому одна функция может обрабатывать несколько элементов.
• Атрибуты, которые начинаются с data-, хранят ваши собственные данные в элементах: data-color="teal" — это element.dataset.color, всегда в виде текста.
• События всплывают через элементы, в которых лежит цель, поэтому один обработчик на списке обрабатывает нажатия на все его пункты, даже добавленные позже. event.target.closest("li") находит пункт, на который нажали, или возвращает null.
• Событие input приходит после каждого изменения текста в поле, так что страница может реагировать, пока пользователь печатает. Событие change приходит, когда меняется выбор: value у select или checked у флажка (true или false).
• У текста есть методы includes(), toLowerCase() и trim(), который убирает пробелы в начале и в конце.
• Событие keydown приходит с каждой нажатой клавишей, а event.key говорит, какая это клавиша: "a", "Enter", "Escape", с заглавными буквами в точности как написано.
• Форма form отправляется кнопкой отправки или клавишей Enter, и тогда она получает событие submit. Вызовите в обработчике event.preventDefault(), иначе браузер загрузит страницу заново, и всё набранное пропадёт.
• Прежде чем использовать набранное, проверьте его: пустое ли оно, не слишком ли короткое, не вместо ли числа (Number.isNaN(), но никогда не === NaN). Показывайте каждую ошибку рядом с её полем, очищайте её, когда поле заполнено правильно, и выполняйте работу формы только когда все поля заполнены правильно.

В следующем уроке, «Мини-проект: Форма регистрации», вы примените всё это на деле в форме регистрации, которая сама себя проверяет: она говорит, что не так, поле за полем, и приветствует нового пользователя, когда всё правильно.

Но сначала немного практики: стикер, на котором можно писать и менять его цвет. Файл script.js снова пуст, и всю программу вы напишете сами.