Сегодня начался медленный старт из-за хорошей жизни мамы. Это было хорошим напоминанием о том, что, несмотря на то, что я занимаюсь всем этим исследованием, мне все еще нужно убедиться, что дети ложатся спать, еда запланирована на неделю, интернет-магазин готов, а дом убран.

Сегодняшний урок был о взаимодействии с пользователем. Сначала я рассмотрел метод 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. Наблюдайте за этим пространством…..