И почему они должны пугать и вас.
Заголовок может вводить в заблуждение, поскольку звучит как угроза, но вы должны чувствовать угрозу. Все, что вы делаете на веб-сайтах, можно «прослушать». От щелчков мыши до нажатий клавиш и наведения мыши на изображение — каждое действие (или бездействие) может быть воспринято сервером веб-сайта.
Сначала это может показаться невинным, и для пользователей это в основном так. Уровень динамического взаимодействия, ожидаемого большинством пользователей от веб-сайта, зависит от использования прослушивателей событий. Без них веб-сайты не более чем постеры фильмов. Однако для программистов прослушиватели событий одновременно и болезненны, и прекрасны. Они общеизвестно сложны и способны «слушать» гораздо больше, чем показывают.
Например, при разработке динамического интерактивного веб-сайта первыми вопросами, которые обычно возникают, являются: «Как пользователи смогут взаимодействовать с x, y или z…?» или «Какие данные мы будем получать от пользователей? ?». Существует множество способов сбора упомянутой информации. Как упоминалось ранее, основными способами сбора информации о пользователях являются прослушиватели событий и отправка форм (поля ввода, в которые пользователи могут вводить информацию).
Итак, как мы назначаем слушателей событий? Мы можем назначить прослушиватели событий определенным элементам в HTML (или DOM, чтобы быть менее конкретным) следующим образом:
document.querySelector('element#id').addEventListener('event', callbackFunction);
С помощью этого кода мы выбираем элемент, который хотим прослушать, с помощью document.querySelector('element#id'), используя как HTML-тег, так и идентификатор элемента. Затем мы присоединяем прослушиватель событий к указанному «узлу» с помощью .addEventListener('event’, callbackFunction);, который прослушивает определенные пользовательские события перед выполнением некоторых функций.
Посмотрите на пример прослушивателя событий на практике на этом классном веб-сайте:
Удивительно! Пустая страница. Нажмите несколько раз на экран, и появится несколько строк. Нажмите еще немного, и цвета начнут появляться.
Итак, этот красивый веб-сайт использует прослушиватели событий, чтобы определить, когда пользователь нажимает на саму страницу. Давайте немного заглянем в код:
Мы получили доступ к DevTools Google Chrome, чтобы посмотреть HTML и любую документацию, используемую веб-сайтом. Перейдя на вкладку «Сеть» в верхней части DevTools, мы можем увидеть, какие запросы и ответы отправляются между веб-сайтом и его сервером:
Важным файлом в данном случае является «index.js». Повторный щелчок открывает другой набор вкладок. Первый, «Заголовки», содержит информацию о GET-запросе. Одна вкладка над разделом «Предварительный просмотр» показывает предварительный просмотр файла JavaScript, отправленного в ответ на запрос.
Ах, идеально. Теперь мы можем посмотреть конкретно в JavaScript, чтобы увидеть, где находятся наши прослушиватели событий:
Справа внизу есть прослушиватель событий, назначенный переменной canvas (назначенной элементу с идентификатором «canvas»):
canvas.addEventListener("click", onRectangleClick)
Он прослушивает события "click" и использует onRectangleClick в качестве функции обратного вызова. А теперь вопрос, что делает onRectangleClick? Мы идем глубже в кроличью нору:
Ух ты! Это что-то делает! Помимо шуток, здесь слишком много всего, чтобы раскрыть его в одном сообщении в блоге. Эта функция зависит от наличия других функций (и, в частности, прослушивателя событий), чтобы добавить динамическое взаимодействие на веб-сайте. Слушатели событий также могут быть настроены на запуск некоторых функций при загрузке веб-страницы. Но что еще более интересно, если пользователь не взаимодействует с веб-сайтом, не будут запущены прослушиватели событий user. Представьте себе пустынное будущее, в котором практически вся человеческая жизнь ушла, а единственный веб-сайт каким-то образом продолжает функционировать (coolmathgames.com). На этом веб-сайте больше не будет пользовательских событий, никогда больше не будет динамической интерактивности. Дун Дун Дун.
Прослушиватели событий кажутся невинной функциональностью, которая делает веб-сайты «умными», но задумайтесь над следующим: что мешает обработчику событий прослушивать другого обработчика событий? Или что, если один прослушиватель событий запускает другую серию функций, которые сами имеют прослушиватели событий? Очень быстро становятся очевидными слои сложности; давай, попробуй сам. В следующий раз, когда вы будете искать головную боль, не ищите ничего, кроме слушателей событий JavaScript.
