Слушатели событий — это часть того, что делает JavaScript таким динамичным, они «слушают» и распознают события. В буткемпе, в котором я сейчас обучаюсь, нас учат, что слушатели событий в основном «выполняют работу» в ответ на «что-то происходящее»; это довольно базовое описание того, что происходит, когда срабатывает событие (когда «что-то происходит»), но я собираюсь немного углубиться в него. Синтаксис базового ванильного JavaScript-приемника событий состоит из нескольких компонентов: элемент, к которому вы хотите прикрепить метод addEventListener(), один параметр — тип события, которое нужно прослушать, второй параметр — функция, которую вы хотите вызвать, когда событие произойдет. Есть и третий необязательный параметр — булево значение, указывающее на погоду, при которой следует использовать пузырьки событий или перехват событий; я собираюсь оставить все как есть, потому что я действительно хочу, чтобы этот блог был как можно более дружелюбным к новичкам, и до сих пор мне не приходилось использовать этот необязательный параметр.
В любом случае, основной синтаксис метода addEventListener с анонимной функцией выглядит следующим образом
element.addEventListener('submit', (_e_) => {
what do you want to happen when this event is heard
)}
Второй параметр — функция, которую вы хотите вызвать, когда произойдет событие; она может быть анонимной или нет (для событий submit вам нужно будет передать функции параметр, обычно это ‘event’ или ‘e’, потому что вам, скорее всего, придется использовать preventDefault(). Лично мой мозг лучше понимает это, когда я использую анонимную функцию, я могу понять, что эта функция высшего порядка является описанием того, что должно произойти при наступлении события.
Существует огромное количество различных событий, которые необходимо отслеживать, вы можете посмотреть обширный список на MDN, но есть два события, которые я считаю важными, которые должны быть хорошо понятны новичкам, и, естественно, они постоянно путаются. Я собираюсь сосредоточиться на этих двух событиях. Первое — это событие «клик», а второе — событие «отправить». Как я уже сказал, их постоянно путают, и неудивительно! В большинстве случаев в событиях отправки присутствует кнопка отправки или что-то подобное, но не позволяйте этому отвлекать вас! На самом деле она нужна только для того, чтобы убедиться, что пользователь выполнил действие, которое вызывает событие; в случае с событиями отправки она обычно прикреплена к форме или какому-либо полю ввода. Что касается событий нажатия, вы можете прикрепить слушателя события к элементу, который не является кнопкой, вспомните URL, который перенаправляет вас на другую страницу, это событие нажатия — без кнопки.
Я также хочу затронуть вопрос, который возник, когда я столкнулся с проблемами при использовании слушателей событий submit, и мне потребовалось неловко много времени, чтобы понять, что независимо ни от чего, значение поля ввода или формы будет возвращено в виде строки, да, это означает, что даже если пользователь введет количество буррито, которое он хочет заказать, в виде числового значения, данные, возвращенные вам. будет строка. Это не является большой проблемой, если только ваш пользователь не пытается увидеть общее количество буррито и тако в своей корзине. Лучший способ, который я использовал для решения этой проблемы, — это реализация функции parseInt(), которая не так сложна, как я пытался ее сделать, так что от одного чрезмерного мыслителя к другим, избавьте себя от головной боли. Это будет простое решение этой проблемы, оно возьмет строковый тип значения (то, что выходит из формы или ввода) и превратит его в целочисленный тип значения. Легко и просто.
Я надеюсь, что что-то здесь может помочь другому новичку, как я, потому что я обнаружил, что иногда действительно нужно говорить на простом английском языке как можно больше, а не только в коде. И раз уж я опускаю знания, которые мне уже дал один из моих тренеров, вот несколько вопросов, с которых они всегда заставляют меня начинать, когда я в затруднительном положении; будь то проблема со слушателями событий или получение forEach() для итерации так, как вам нужно:
Что я пытаюсь сделать в целом?
Что я пытаюсь сделать в каждой строке кода?
Работаю ли я с правильными элементами для этого?
И еще
console.log('literally everything')
потому что если случайно они прочитают это и я не включу это золотое правило, я буду поджарен. Но вы и так это знаете, будучи разработчиком-бомбой, которым вы являетесь 😉
источники
клик против отправки
HTML-формы и события отправки
вечно полезный w3schools
parseInt()
функции более высокого порядка
preventDefault()
forEach()