События JavaScript: краткое руководство по тому, как заставить ваш сайт работать на вас

Что именно делает сайт интерактивным? Что позволяет мне нажать кнопку и поставить лайк чьему-то сообщению в Интернете? Что позволяет мне что-то искать? Ответ на все эти вопросы прост: события JavaScript!

Что такое события JavaScript?

События JavaScript обеспечивают интерактивность на веб-сайтах, позволяя запускать действия на основе взаимодействия с пользователем. Будь то нажатие кнопки, ввод в строке поиска или наведение курсора на изображение, события JavaScript позволяют веб-сайтам реагировать на вводимые пользователем данные и обеспечивают более привлекательный и динамичный пользовательский интерфейс. События JavaScript — это то, что позволяет нам взаимодействовать с веб-сайтами и приложениями, чтобы делать то, что мы от них хотим (например, как изображение, подписаться на список рассылки,

Как именно используются события JavaScript?

Использование события JavaScript — простой процесс. Вы выбираете элемент, к которому хотите добавить событие, выбираете событие, которое хотите использовать, добавляете прослушиватель событий к выбранному элементу, а затем указываете ему, что делать при срабатывании. Давайте рассмотрим быстрый и простой пример:

<!-- 1 -->
<button id='button'>Click Me!</button>
// 2
const button = document.getElementById('button');
//3
button.addEventListener('click', () => {
//4  
console.log('I was clicked!'); 
});

Давайте немного разберем этот пример.

В первом фрагменте кода у нас есть кнопка HTML с идентификатором «кнопка».
Затем в нашем JavaScript мы начали с выбора этой кнопки и сохранения ее в переменной. Это позволяет нам легко манипулировать этой кнопкой. Например, добавить к нему прослушиватель событий.
Затем мы добавляем прослушиватель событий к выбранной кнопке. В данном случае он прослушивает событие «щелчка».
Здесь мы говорим ему, что делать, когда это событие срабатывает. В этом случае, когда кнопка нажата, мы хотим записать в консоль сообщение «Меня нажали!».

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

Список событий JavaScript

Хотя приведенный ниже список не будет исчерпывающим (поскольку существует множество различных событий, которые вы можете использовать), он должен помочь вам понять всю мощь событий JavaScript.

События мыши *:
- click: срабатывает при нажатии и отпускании элемента
- dblclick: срабатывает при двойном щелчке по одному элементу
События клавиатуры **:
- keydown: срабатывает при нажатии клавиши
- keyup: срабатывает при отпускании клавиши
Отправить событие ***: срабатывает при отправке формы
Событие DOMContentLoaded ****: запускается, когда содержимое DOM загружено.

Как указано выше, этот список определенно не является исчерпывающим, но для начала написания кода это некоторые события, которые будут использоваться совсем немного. Полный список событий JavaScript см. ¹ ниже.

Дополнительные примеры событий

Мы уже рассмотрели пример простого события click. Давайте рассмотрим еще пару, чтобы по-настоящему понять идеологию событий JavaScript. Начнем с простого события keydown.

Событие нажатия клавиши:

document.addEventListener('keydown', (event) => console.log(event.key))

В этом примере мы прикрепили событие keydown ко всему документу с помощью. Затем он прослушивает срабатывание нажатия клавиши. В этом примере мы хотим, чтобы он что-то выводил на консоль. Если бы мы только зафиксировали событие в console.log, оно вернуло бы нам объект с кучей ключей и значений. В примере у нас есть console.log значение ключа с именем «ключ». В этом ключе хранится значение нажатой клавиши. (Да, я знаю, что слово «ключ» использовалось в этом предложении несколько раз.)

Отправить событие:

<form id='form'>
  <label for='search'>Search...</label>
  <input id='search' type='text' placeholder='Search'/>
  <input type='submit'/>
</form>
const searchForm = document.querySelector('#form');

searchForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const userInput = document.querySelector('input#search');
  console.log(userInput.value);
};

Мы начнем этот пример с создания простой формы поиска. Затем мы выбираем форму и сохраняем ее в переменной для более динамичного управления ею. Затем вы добавляете прослушиватель событий к переменной, в которой вы только что сохранили элемент формы. Мы прослушиваем срабатывание события submit. Отправка событий работает немного по-другому. Здесь мы используем метод preventDefault(), потому что действие по умолчанию при отправке обновляет страницу и ничего нам не дает. После этого мы сохраняем фактический поисковый ввод в переменную, опять же для более динамичных манипуляций. Затем у нас есть console.log userInput.value. Это запишет в console.log все, что было введено в строке поиска и отправлено. Есть много типов форм, которые вы можете использовать. Подробнее о формах см. ² ниже.

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

Ресурсы

¹Список событий — https://developer.mozilla.org/enUS/docs/Web/Events#standard_events

²Формы — https://www.htmlgoodies.com/html/build-web-forms-html/ и https://www.htmlgoodies.com/html/building-web-forms-part-2/

*События мыши — https://developer.mozilla.org/en-US/docs/Web/API/Element#mouse_events

** События клавиатуры — https://developer.mozilla.org/en-US/docs/Web/API/Element#keyboard_events

***Отправить событие — https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

****Событие DOMContentLoaded — https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

События JavaScript: краткое руководство по тому, как заставить ваш сайт работать на вас