Выбор ответа Junior DOM на практике обновлено
Отправка формы по Enter
Вопрос
Форма добавления задачи обрабатывается так: button.addEventListener('click', add). Пользователь жмёт Enter в поле, и страница перезагружается. Как правильно?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Слушать submit у формы и вызывать e.preventDefault(). Событие submit срабатывает и по клику на кнопку, и по Enter, а preventDefault отменяет перезагрузку.
Варианты ответа
- Слушать
submitу формы и вызыватьe.preventDefault()правильный ответ - Слушать
keydownу поля и при Enter вызыватьadd()вручную - Убрать тег
<form>, оставив только поле ввода и кнопку - Поставить у кнопки
type="reset", чтобы Enter не отправлял форму
Разбор
Событие submit срабатывает и по клику на кнопку, и по Enter, а preventDefault отменяет перезагрузку. Заодно работает встроенная валидация (required). Ловить Enter вручную значит дублировать поведение браузера и пропустить другие способы отправки. Без <form> теряется семантика и валидация. type="reset" очищает поля, а не отправляет форму.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.