Подумайте о своем любимом веб-сайте или приложении. Будь то сайт электронной коммерции или служба потоковой передачи, все они имеют довольно схожие функции: вы можете нажимать на элементы на странице и прокручивать вверх и вниз. Эти действия появились не по волшебству — они называются Event Listeners. Общими прослушивателями событий, с которыми мы сталкиваемся, являются «щелчок» и «отправить». Давайте узнаем разницу.
Прежде чем мы сможем понять разницу между «кликом» и «отправкой» прослушивателей событий, нам нужно понять, что такое прослушиватель событий. Прослушиватели событий встроены в методы Javascript, которые, по сути, делают то, что говорит название — они прослушивают событие в нашем документе и выполняют действие, как только это событие было инициировано. Чтобы добавить прослушиватель событий, мы присоединяем .addEventListener() к HTML-элементу, на который мы хотим настроить таргетинг, и передаем ему два аргумента: тип события и функцию.
Синтаксис для .addEventListener():
element.addEventListener("event", function)
Проверьте нижеприведенный прослушиватель событий:
// where you would grab the HTML element
const exampleVariable = document.querySelector("#example")
// how you would set up the Event Listener after grabbing the HTML element
exampleVariable.addEventListener("click", testFunction())
// the function that is being called inside of the Event Listener
function testFunction() {
console.log("you clicked me!")
}
Как вы думаете, что произойдет, если вы нажмете на элемент exampleVariable? Правильно — консоль скажет «вы нажали на меня!»
Теперь, когда мы понимаем, что такое прослушиватель событий, когда мы используем «щелчок» вместо «отправить»? Прослушиватель событий «щелчок» можно прикрепить практически к любому элементу HTML в документе, но «отправить» предназначен специально для форм. «Отправить» позволяет настроить таргетинг формы, чтобы — как предлагает Event Listener — отправить все, что было добавлено в поля формы. Почему бы просто не использовать прослушиватель событий «щелчка» в форме? Если вы добавите «щелчок» вместо «отправить», щелчок внутри вашей формы вызовет прослушиватель событий.
Посмотрите, что происходит, когда вы используете «щелчок»:
по сравнению с тем, что происходит, когда вы используете «отправить»:
Как видите, когда используется событие «щелчок», действие происходит при нажатии на любую часть формы. В данном случае console.log("Я ваш самый большой поклонник!") появлялся при каждом клике. С событием «отправить» console.log («Я ваш самый большой поклонник!») появлялся только тогда, когда форма была отправлена с помощью кнопки отправки.
Если вы посмотрите на приведенный выше пример, вы увидите, что я добавил дополнительную строку с прослушивателем событий «отправить»: e.preventDefault(). Действие по умолчанию «отправить» — обновить страницу. Раздражает, да? К счастью, для этого есть простое решение: event.preventDefault(). Как только вы добавите .preventDefault(), вы предотвратите обновление страницы при каждой «отправке».
После добавления .preventDefault() вы сможете получить то, что было отправлено с формой, и добавить его в DOM, создать базу данных — все, что вы хотите!
