Сегодня начался медленный старт из-за хорошей жизни мамы. Это было хорошим напоминанием о том, что, несмотря на то, что я занимаюсь всем этим исследованием, мне все еще нужно убедиться, что дети ложатся спать, еда запланирована на неделю, интернет-магазин готов, а дом убран.
Сегодняшний урок был о взаимодействии с пользователем. Сначала я рассмотрел метод addEventListener()
, который прикрепляет обработчик событий к указанному элементу. Он прикрепляет элемент, не переопределяя существующие обработчики событий.
Синтаксис:
element.addEventListener(event, function);
Некоторые события: ввод мыши, двойной щелчок, событие отправки, наведение мыши.
Например следующее:
button.addEventListener('click', function(){ console.log('you have clicked the button'); });
Это будет регистрировать в консоли строку «вы нажали кнопку», когда пользователь нажимает кнопку «Очистить все» в приложении «Делать».
Вы можете добавить несколько прослушивателей событий.
Следующий урок был о формах, имеющих отношение к приложению To Do.
Я узнал, что при базовой настройке формы, которую установил здесь инструктор (https://epic-aryabhata-7b8bc0.netlify.com/?), при отправке формы вся страница обновлялась сама. У него не было никакого способа захватить данные пользователей.
Мне нужно было создать переменную для целевой формы:
var formField = document.querySelector('form');
и переменная для таргетинга ввода
var input = document.getElementById('user-todo');
затем я добавил прослушиватель событий в formfield
для прослушивания submit
и в console.log текст «форма была отправлена». Событие отправки запускается, когда форма отправляется, когда пользователь нажимает кнопку ввода.
formField.addEventListener('submit', function() { console.log('form has been submitted'); });
Если бы я не хотел, чтобы форма обновлялась каждый раз, когда форма была отправлена, мне нужно было немного добавить, чтобы она выглядела следующим образом:
formField.addEventListener('submit', function(e) { e.preventDefault(); console.log('form has been submitted'); });
Буква e в функции () обозначает событие, которое происходит, когда пользователь нажимает кнопку «Отправить» и отправляет форму.
e.preventDefault();
предотвращает обновление страницы, которое используется по умолчанию при отправке формы.
С приведенным выше кодом, когда кто-то отправляет новое задание, в консоли будет отображаться «форма отправлена».
Следующим шагом было изменить это с жестко закодированного на такой ответ, чтобы регистрировать в консоли то, что пользователь помещает в форму. Чтобы захватить текст пользователей, мне нужно было сделать следующее:
formField.addEventListener('submit', function(e) { e.preventDefault(); console.log(input.value); });
input.value
ориентируясь на входную переменную, которую я создал ранее, которая нацелена на поле ввода, а значение указывает на значение, чтобы мы могли его использовать. Теперь всякий раз, когда я что-то вводил в поле ввода, это записывалось в консоль.
Думаю, наконец-то готов приступить к созданию приложения To Do. Наблюдайте за этим пространством…..