Слушатели событий, событие Submit, захват и создание элементов для манипулирования DOM

Прослушивание событий и DOM

За первые 2 месяца моего перехода из сферы услуг в мир технологий в Flatiron School я увлекся манипулированием DOM (Document Object Model), добавляя и изменяя информацию из баз данных и кода javascript в DOM. Объектная модель документа (DOM) — это программный интерфейс для веб-документов. Она представляет страницу так, что программы могут изменять структуру, стиль и содержание документа. DOM представляет документ в виде узлов и объектов; таким образом, языки программирования могут взаимодействовать со страницей. Веб-страница — это документ, который может отображаться либо в окне браузера, либо в виде HTML-источника. В обоих случаях это один и тот же документ, но представление DOM позволяет им манипулировать. Как объектно-ориентированное представление веб-страницы, оно может быть изменено с помощью языка сценариев, такого как JavaScript. Наиболее интересным способом манипулирования DOM являются «Слушатели событий».

Что такое слушатель событий?

Слушатели событий — это процедуры функции в компьютерной программе, которая ожидает наступления события. Примерами события являются щелчок или перемещение мыши пользователем, нажатие клавиши на клавиатуре, отправка сообщения, внутренний таймер или прерывание. Другими словами, когда пользователь взаимодействует с DOM, события происходят так, как этого хотят программисты, когда пользователь взаимодействует с определенной частью сайта или приложения.

Событие отправки

Событие отправки — это одно из самых интересных событий, которое необходимо изучить, когда вы только начинаете свой путь инженера-программиста javascript. Давайте рассмотрим пример события submit и то, как именно оно работает…

Сначала мы рассмотрим элемент, в который мы поместим наш слушатель событий в нашем HTML-файле, который будет отображаться в нашем веб-браузере для взаимодействия с пользователем.

<!--HTML FILE-->
<form id="submitdiv">
  <label for="names">Names: <input type="text" name="name" id="newNames"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<ul id="log">
<!--Here our list of names will be placed-->
</ul>

Далее мы перейдем в наш файл javascript и возьмем элемент формы из нашего HTML-файла. Затем мы добавим наш слушатель событий к элементу, который мы только что захватили.

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {})

1. Мы создали переменную (const), добавили имя (form) и назначили элемент, который мы захватываем, переменной (мы используем const, чтобы сказать, что эта переменная будет постоянной на протяжении всего нашего документа javascript). Мы используем хэштег, когда захватываем элемент с именем ID с помощью «.querySelector» или иначе мы можем использовать «.getElementById».
2. Мы присоединяем нашу новую переменную к нашему «.addEventListener», а затем назначаем первый параметр как событие, которое мы пытаемся выполнить. В данном случае нашим событием является ‘submit’.
3. Во втором параметре мы задаем открытый блок кода, в котором все, что мы напишем внутри, будет выполнять событие submit при нажатии на кнопку, которую мы создали внутри нашего HTML-документа в веб-браузере.

Создание элементов, которые появятся после активации события отправки, и добавление их в DOM

Теперь давайте предположим, что мы хотим, чтобы наше событие отправки возвращало что-то совершенно новое, появляющееся на нашей веб-странице после нажатия на кнопку, в данном случае какое-то имя. Как нам это сделать? Давайте посмотрим…

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// grabbing our ul element from our HTML file
const ul = document.getElementById('log')
// grabbing our input element from our HTML file
const input = document.getElementById('newNames')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {
     // here we are preventing the page from refreshing upon a 
     //submission
     e.preventDefault()
     // creating an element to place inside our ul element
     const li = document.createElement('li')
     // setting our new element text content to the value of what 
     //we input
     li.textContent = input.value
     // appending our new list of names to our unordered list 
     //element
     ul.append(li)
     // making the input slot reset upon a submit event activation
     form.reset()
})

Итак, первое, что мы всегда хотим поместить в блок кода формы отправки, это «e.preventDefault()». Это остановит перезагрузку страницы после срабатывания события отправки.
Далее мы возьмем наш элемент «ul» из нашего HTML-файла с помощью «document.getElementByID» по нашему идентификатору «log» и установим его в переменную. Обратите внимание, что нам не пришлось использовать хэштег для этого, поскольку мы не использовали «.querySelector». Во-вторых, мы захватили наш элемент input по его id-имени, используя тот же метод (хэштег не нужен), и также установили его в переменную. Затем мы создали новый элемент списка внутри нашего слушателя события submit, установив «document.createElement» в «(li)» и задав ему имя переменной. После этого мы установили текстовое содержимое нового элемента «li» на значение ввода, которое является тем, что мы вводим в слот «Введите имя» прямо над нашей кнопкой отправки. Наконец, нам нужно добавить элемент «li» и его новое текстовое содержимое, введенное в слот ввода «Enter Name», в уже существующий элемент «ul» в нашем HTML-файле. Мы делаем это, помещая нашу переменную «ul» вместе с «.append» непосредственно перед нашей новой переменной «li» в круглых скобках. Наконец, мы добавляем «.reset()» к нашей переменной «form», чтобы вернуть слот ввода к значению по умолчанию после срабатывания события submit.

Теперь, когда мы вводим имя в наш слот ввода и нажимаем кнопку отправки, это имя должно появиться чуть ниже в виде неупорядоченного списка внутри нашего элемента «ul» в браузере, в то время как наш слот ввода возвращается к значению по умолчанию и готов к отправке другого имени. Поздравляем! Вы изучили один из самых известных и широко используемых слушателей событий во всем javascript. Сделайте глубокий вдох, потому что мы наконец-то закончили.

Заключение

Это была самая увлекательная часть моего обучения на первой фазе 5-этапного курса в Flatiron School. Я с нетерпением жду изучения еще многих инструментов, которые сделают из меня высококлассного разработчика программного обеспечения и помогут мне внедрять инновации и формировать технологическую индустрию в целом.