Как сделать сайт интерактивным с событиями JavaScript

  1. Вступление в Понимание DOM серии, мы обсудили дерево DOM и как доступ , траверс ,...
  2. Встроенные атрибуты обработчика событий
  3. Свойства обработчика событий
  4. Слушатели событий
  5. Общие события
  6. События мыши
  7. События клавиатуры
  8. Объекты событий
  9. Заключение

Вступление

в Понимание DOM серии, мы обсудили дерево DOM и как доступ , траверс , добавить и удалить , а также модифицировать узлы и элементы, использующие Консоль разработчика ,

Несмотря на то, что на данный момент мы можем вносить практически любые изменения в DOM, с точки зрения пользователя, это не очень полезно, потому что мы вносим изменения только вручную. Узнав о событиях, мы поймем, как все связать воедино для создания интерактивных веб-сайтов.

События - это действия, которые происходят в браузере и могут быть инициированы пользователем или самим браузером. Ниже приведены несколько примеров общих событий, которые могут произойти на веб-сайте:

  • Страница заканчивается загрузкой
  • Пользователь нажимает кнопку
  • Пользователь наводит курсор на выпадающий список
  • Пользователь отправляет форму
  • Пользователь нажимает клавишу на клавиатуре

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

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

Обработчики событий и слушатели событий

Когда пользователь нажимает кнопку или нажимает клавишу, происходит событие. Это называется событие нажатия или событие нажатия клавиши, соответственно.

Обработчик события - это функция JavaScript, которая запускается при возникновении события.

Прослушиватель событий присоединяет адаптивный интерфейс к элементу, который позволяет этому конкретному элементу ждать и «прослушивать» указанное событие.

Есть три способа назначить события элементам:

  • Встроенные обработчики событий
  • Свойства обработчика событий
  • Слушатели событий

Мы рассмотрим все три метода, чтобы убедиться, что вы знакомы с каждым способом запуска события, а затем обсудим плюсы и минусы каждого метода.

Встроенные атрибуты обработчика событий

Чтобы начать изучение обработчиков событий, сначала рассмотрим встроенный обработчик событий . Давайте начнем с очень простого примера, который состоит из элемента кнопки и элемента ap. Мы хотим, чтобы пользователь нажал кнопку, чтобы изменить текстовое содержимое p.

Давайте начнем с HTML-страницы с кнопкой в ​​теле. Мы будем ссылаться на файл JavaScript, к которому добавим код чуть позже.

events.html

<! DOCTYPE html> <html lang = "en-US"> <head> <title> События </ title> </ head> <body> <! - Кнопка добавления -> <button> Нажмите меня </ button > <p> Попробуйте изменить меня. </ p> </ body> <! - Ссылочный файл JavaScript -> <script src = "js / events.js"> </ script> </ html>

Непосредственно на кнопку мы добавим атрибут с именем onclick. Значением атрибута будет созданная нами функция с именем changeText ().

events.html

<! DOCTYPE html> <html lang = "en-US"> <head> <title> События </ title> </ head> <body> <button onclick = "changeText ()"> Нажмите меня </ button> < p> Попробуйте изменить меня. </ p> </ body> <script src = "js / events.js"> </ script> </ html>

Давайте создадим наш файл events.js, который мы поместили в каталог js / здесь. В нем мы создадим функцию changeText (), которая изменит textContent элемента p.

JS / events.js

// Функция для изменения текстового содержимого абзаца const changeText = () => {const p = document.querySelector ('p'); p.textContent = "Я изменился из-за встроенного обработчика событий."; }

Когда вы впервые загрузите events.html, вы увидите страницу, которая выглядит следующим образом:

Однако, когда вы или другой пользователь нажимаете на кнопку, текст тега p изменится с Попробовать изменить меня. Я изменился из-за встроенного обработчика событий.

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

Вы можете сравнить встроенные обработчики событий со встроенными стилями CSS в элементе HTML. Гораздо более практично поддерживать отдельную таблицу стилей классов, чем создавать встроенные стили для каждого элемента, так же как более целесообразно поддерживать JavaScript, который обрабатывается полностью через отдельный файл сценария, чем добавлять обработчики для каждого элемента.

Свойства обработчика событий

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

Настройка будет такой же, за исключением того, что мы больше не включаем onclick = "changeText ()" в разметку:

events.html

... <body> <button> Нажмите меня </ button> <p> Я изменю. </ p> </ body> ...

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

JS / events.js

// Функция для изменения текстового содержимого абзаца const changeText = () => {const p = document.querySelector ('p'); p.textContent = "Я изменился из-за свойства обработчика событий."; } // Добавить обработчик события как свойство элемента кнопки const button = document.querySelector ('button'); button.onclick = changeText;

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

При первой загрузке страницы браузер отобразит следующее:

Теперь, когда вы нажмете кнопку, она будет иметь тот же эффект, что и раньше:

Обратите внимание, что при передаче ссылки на функцию в свойство onclick мы не включаем скобки, так как мы не вызываем функцию в этот момент, а только передаем ссылку на нее.

Свойство обработчика событий несколько более легко обслуживаемо, чем встроенный обработчик, но оно по-прежнему страдает некоторыми из тех же препятствий. Например, попытка установить несколько отдельных свойств onclick приведет к перезаписи всех, кроме последнего, как показано ниже.

JS / events.js

const p = document.querySelector ('p'); const button = document.querySelector ('button'); const changeText = () => {p.textContent = "Буду ли я менять?"; } const alertText = () => {alert ('Буду ли я предупреждать?'); } // События могут быть перезаписаны button.onclick = changeText; button.onclick = alertText;

В приведенном выше примере нажатие кнопки будет только отображать предупреждение, а не изменять текст p, поскольку код alert () был последним, добавленным в свойство.

С пониманием как встроенных обработчиков событий, так и свойств обработчиков событий, давайте перейдем к прослушивателям событий.

Слушатели событий

Последнее дополнение к обработчикам событий JavaScript - слушатели событий. Слушатель событий отслеживает событие в элементе. Вместо того, чтобы назначать событие непосредственно свойству элемента, мы будем использовать метод addEventListener () для прослушивания события.

addEventListener () принимает два обязательных параметра - событие, которое он ожидает, и функцию обратного вызова слушателя.

HTML-код для нашего прослушивателя событий будет таким же, как в предыдущем примере.

events.html

... <button> Нажмите меня </ button> <p> Я изменю. </ p> ...

Мы по-прежнему будем использовать ту же функцию changeText (), что и раньше. Мы прикрепим метод addEventListener () к кнопке.

JS / events.js

// Функция для изменения текстового содержимого абзаца const changeText = () => {const p = document.querySelector ('p'); p.textContent = "Я изменился из-за прослушивателя событий."; } // Прослушивание события щелчка const button = document.querySelector ('button'); button.addEventListener ('click', changeText);

Обратите внимание, что в первых двух методах событие click упоминалось как onclick, но в случае прослушивателей событий оно упоминалось как click. Каждый слушатель события бросает на слово. В следующем разделе мы рассмотрим другие примеры других типов событий.

Когда вы перезагрузите страницу с кодом JavaScript выше, вы получите следующий вывод:

Когда вы перезагрузите страницу с кодом JavaScript выше, вы получите следующий вывод:

На первый взгляд, слушатели событий кажутся очень похожими на свойства обработчика событий, но у них есть несколько преимуществ. Мы можем установить несколько прослушивателей событий для одного элемента, как показано в примере ниже.

JS / events.js

const p = document.querySelector ('p'); const button = document.querySelector ('button'); const changeText = () => {p.textContent = "Буду ли я менять?"; } const alertText = () => {alert ('Буду ли я предупреждать?'); } // К одному событию и элементу можно добавить несколько слушателей button.addEventListener ('click', changeText); button.addEventListener ('click', alertText);

В этом примере сработают оба события, предоставляя пользователю как предупреждение, так и измененный текст после нажатия на предупреждение.

Часто анонимные функции будут использоваться вместо ссылки на функцию в прослушивателе событий. Анонимные функции - это функции, которые не названы.

// Анонимная функция в прослушивателе событий button.addEventListener ('click', () => {p.textContent = "Буду ли я менять?";});

Также возможно использовать функцию removeEventListener () для удаления одного или всех событий из элемента.

// Удалить функцию оповещения из элемента button button.removeEventListener ('click', alertText);

Кроме того, вы можете использовать addEventListener () для документа и объекта окна.

Слушатели событий в настоящее время являются наиболее распространенным и предпочтительным способом обработки событий в JavaScript.

Общие события

Мы узнали о встроенных обработчиках событий, свойствах обработчиков событий и прослушивателях событий, используя событие click, но в JavaScript есть еще много событий. Мы рассмотрим некоторые из наиболее распространенных событий ниже.

События мыши

События мыши являются одними из наиболее часто используемых событий. Они относятся к событиям, которые включают нажатие кнопок мыши или зависание и перемещение указателя мыши. Эти события также соответствуют эквивалентным действиям на сенсорном устройстве.

Событие Описание click Запускается при нажатии и отпускании мыши на элементе dblclick Запускается при двойном щелчке по элементу mouseenter Вызывается, когда указатель входит в элемент. Mouseleave Запускается, когда указатель покидает элемент. Перемещение мыши происходит при каждом перемещении указателя внутри элемента.

Щелчок - это составное событие, которое состоит из комбинированных событий mousedown и mouseup, которые запускаются, когда кнопка мыши нажимается или поднимается соответственно.

Использование mouseenter и mouseleave в тандеме воссоздает эффект наведения, который сохраняется до тех пор, пока указатель мыши находится на элементе.

События формы - это действия, относящиеся к формам, например, выбор или невыбранность элементов ввода и отправка форм.

Описание события submit Срабатывает, когда форма отправляется, фокус Срабатывает, когда элемент (например, вход) получает размытие фокуса. Срабатывает, когда элемент теряет фокус.

Фокус достигается при выборе элемента, например, с помощью щелчка мыши или перехода к нему с помощью клавиши TAB.

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

События клавиатуры

События клавиатуры используются для обработки действий клавиатуры, таких как нажатие клавиши, поднятие клавиши и удержание клавиши.

Описание события keydown Срабатывает один раз при нажатии клавиши keyup Срабатывает один раз при отпускании клавиши нажатие кнопки непрерывно, пока нажата кнопка

Хотя они выглядят одинаково, события нажатия клавиш и нажатия клавиш не имеют доступа ко всем одинаковым клавишам. В то время как нажатие клавиши будет подтверждать каждую нажатую клавишу, нажатие клавиши будет пропускать клавиши, которые не производят символ, например, SHIFT, ALT или DELETE.

События клавиатуры имеют особые свойства для доступа к отдельным клавишам.

Если параметр, известный как объект события, передается в прослушиватель событий, мы можем получить доступ к дополнительной информации о действии, которое имело место. Три свойства, которые относятся к объектам клавиатуры, включают keyCode, key и code.

Например, если пользователь нажимает букву клавишу на клавиатуре, появятся следующие свойства, относящиеся к этой клавише:

Свойство Описание Пример keyCode Число, относящееся к клавише 65. Представляет имя символа, код. Представляет физическую нажатую клавишу. KeyA

Чтобы показать, как собирать эту информацию через консоль JavaScript, мы можем написать следующие строки кода.

// Проверка свойств keyCode, key и code document.addEventListener ('keydown', event => {console.log ('key:' + event.keyCode); console.log ('key:' + event.key) ; console.log ('code:' + event.code);});

Как только мы нажмем клавишу ENTER на консоли, мы теперь можем нажать клавишу на клавиатуре, в этом примере мы нажмем a.


Выход

keyCode: 65 ключ: код: KeyA

Свойство keyCode - это число, которое относится к нажатой клавише. Свойство key - это имя символа, которое может меняться - например, нажатие клавиши со SHIFT приведет к клавише A. Свойство code представляет физическую клавишу на клавиатуре.

Обратите внимание, что keyCode находится в процессе устаревания, и предпочтительно использовать код в новых проектах.

Чтобы узнать больше, вы можете просмотреть полный список событий в сети разработчиков Mozilla ,

Объекты событий

Объект Event состоит из свойств и методов, к которым могут обращаться все события. В дополнение к универсальному объекту Event каждый тип события имеет свои собственные расширения, такие как KeyboardEvent и MouseEvent.

Объект Event передается через функцию слушателя в качестве параметра. Это обычно пишется как событие или e. Мы можем получить доступ к свойству code события keydown для репликации элементов управления клавиатуры в игре для ПК.

Чтобы попробовать это, создайте основной файл HTML с тегами <p> и загрузите его в браузер.

событийно-тест-p.html

<! DOCTYPE html> <html lang = "en-US"> <head> <title> События </ title> </ head> <body> <p> </ p> </ body> </ html>

Затем введите следующий код JavaScript в браузере Консоль разработчика ,

// Передаем событие слушателю document.addEventListener ('keydown', event => {var element = document.querySelector ('p'); // Установить переменные для кодов keydown var a = 'KeyA'; var s = 'KeyS'; var d = 'KeyD'; var w = 'KeyW'; // Установить направление для каждого переключателя кода (event.code) {case a: element.textContent = 'Left'; break; case s: element .textContent = 'Down'; break; case d: element.textContent = 'Right'; break; case w: element.textContent = 'Up'; break;}});

Когда вы нажмете одну из клавиш - a, s, d или w - вы увидите вывод, подобный следующему:

Когда вы нажмете одну из клавиш - a, s, d или w - вы увидите вывод, подобный следующему:

Отсюда вы можете продолжить разработку того, как браузер будет реагировать на нажатие этих клавиш пользователем, и может создать более динамичный веб-сайт.

Далее мы рассмотрим одно из наиболее часто используемых свойств события: свойство target. В следующем примере у нас есть три элемента div внутри одного раздела.

событийно-тест-div.html

<! DOCTYPE html> <html lang = "en-US"> <head> <title> События </ title> </ head> <body> <section> <div id = "one"> One </ div> < div id = "two"> Two </ div> <div id = "three"> Three </ div> </ section> </ body> </ html>

Используя event.target с JavaScript в консоли разработчика нашего браузера, мы можем поместить один прослушиватель событий во внешний элемент section и получить наиболее глубоко вложенный элемент.

const section = document.querySelector ('section'); // Распечатать выбранную цель section.addEventListener ('click', event => {console.log (event.target);});

Нажатие на любой из этих элементов вернет вывод соответствующего конкретного элемента в консоль, используя event.target. Это чрезвычайно полезно, поскольку позволяет разместить только один прослушиватель событий, который можно использовать для доступа ко многим вложенным элементам.

Это чрезвычайно полезно, поскольку позволяет разместить только один прослушиватель событий, который можно использовать для доступа ко многим вложенным элементам

С помощью объекта Event мы можем настроить ответы, относящиеся ко всем событиям, включая общие события и более конкретные расширения.

Заключение

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

В этом уроке мы узнали, что такое события, примеры общих событий, различие между обработчиками событий и слушателями событий и как получить доступ к объекту Event. Используя эти знания, вы сможете начать создавать динамические веб-сайты и приложения.

TextContent = "Буду ли я менять?
Буду ли я предупреждать?
TextContent = "Буду ли я менять?
Буду ли я предупреждать?
TextContent = "Буду ли я менять?

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

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

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!