Понимание событий в JavaScript
Несмотря на то, что на данный момент мы можем вносить практически любые изменения в DOM, с точки зрения пользователя, это не очень полезно, поскольку мы вносим изменения только вручную. Узнав о событиях, мы поймем, как все связать воедино для создания интерактивных веб-сайтов.
- События * — это действия, выполняемые в браузере, которые могут быть инициированы пользователем или самим браузером. Ниже приведены несколько примеров общих событий, которые могут произойти на веб-сайте:
- Страница заканчивается загрузкой
- Пользователь нажимает кнопку
- Пользователь наводит курсор на выпадающий список
- Пользователь отправляет форму
- Пользователь нажимает клавишу на клавиатуре
Кодируя ответы JavaScript, которые выполняются на событие, разработчики могут отображать сообщения для пользователей, проверять данные, реагировать на нажатие кнопок и многие другие действия.
В этой статье мы рассмотрим обработчики событий, прослушиватели событий и объекты событий. Мы также рассмотрим три различных способа написания кода для обработки событий и несколько наиболее распространенных событий. Узнав о событиях, вы сможете сделать более интерактивный веб-интерфейс для конечных пользователей.
Обработчики событий и слушатели событий
Когда пользователь нажимает кнопку или нажимает клавишу, происходит событие. Это называется событие нажатия или событие нажатия клавиши, соответственно.
- Обработчик события * — это функция JavaScript, которая запускается при возникновении события.
- Слушатель событий * присоединяет отзывчивый интерфейс к элементу, который позволяет этому конкретному элементу ждать и «прослушивать» указанное событие.
Есть три способа назначить события элементам:
- Встроенные обработчики событий
- Свойства обработчика событий
- Слушатели событий
Мы рассмотрим все три метода, чтобы убедиться, что вы знакомы с каждым способом запуска события, а затем обсудим плюсы и минусы каждого метода.
Встроенные атрибуты обработчика событий
Чтобы начать изучение обработчиков событий, сначала рассмотрим * встроенный обработчик событий *. Давайте начнем с очень простого примера, который состоит из элемента + button + и элемента + p + . Мы хотим, чтобы пользователь нажимал кнопку «», чтобы изменить текстовое содержимое « p +».
Начнем с HTML-страницы с кнопки в теле. Мы будем ссылаться на файл JavaScript, к которому добавим немного кода.
Try to change me.
Непосредственно по кнопке «» мы добавим атрибут « onclick». Значением атрибута будет созданная нами функция с именем + changeText () + .
Try to change me.
Давайте создадим наш файл + events.js + , который мы поместили в каталог + js / + здесь. В нем мы создадим функцию + changeText () + , которая изменит + textContent + элемента + p + .
// Function to modify the text content of the paragraph const changeText = () =>
Когда вы впервые загрузите + events.html , вы увидите страницу, которая выглядит следующим образом:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-1.png [Первый рендеринг events.html]
Однако, когда вы или другой пользователь нажимаете на кнопку, текст тега + p + изменится с + Попробуйте изменить меня. + На + Я изменился из-за встроенного обработчика событий. + :
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-2.png [Первый ответ на событие при рендеринге events.html]
Встроенные обработчики событий — это простой способ начать понимать события, но их, как правило, не следует использовать вне тестирования и в образовательных целях.
Вы можете сравнить встроенные обработчики событий со встроенными стилями CSS в элементе HTML. Гораздо более практично поддерживать отдельную таблицу стилей классов, чем создавать встроенные стили для каждого элемента, так же как более целесообразно поддерживать JavaScript, который обрабатывается полностью через отдельный файл сценария, чем добавлять обработчики для каждого элемента.
Свойства обработчика событий
Следующим шагом от встроенного обработчика событий является * свойство обработчика событий *. Это работает очень похоже на встроенный обработчик, за исключением того, что мы устанавливаем свойство элемента в JavaScript вместо атрибута в HTML.
Настройка будет такой же, за исключением того, что мы больше не включаем + onclick =» changeText () «+ в разметку:
Наша функция также останется схожей, за исключением того, что теперь нам нужно получить доступ к элементу + button в JavaScript. Мы можем просто получить доступ к + onclick + так же, как мы обращаемся к + style + или + id + или к любому другому свойству элемента, а затем назначить ссылку на функцию.
// Function to modify the text content of the paragraph const changeText = () => < const p = document.querySelector('p'); p.textContent = "I changed because of an event handler property."; >// Add event handler as a property of the button element const button = document.querySelector('button'); button.onclick = changeText;При первой загрузке страницы браузер отобразит следующее:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-3.png [Начальная загрузка events.html с обработчиком событий]
Теперь, когда вы нажмете кнопку, она будет иметь тот же эффект, что и раньше:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-4.png [Ответ с обработчиком событий events.html]
Обратите внимание, что при передаче ссылки на функцию в свойство + onclick + мы не включаем скобки, так как мы не вызываем функцию в этот момент, а только передаем ссылку на нее.
Свойство обработчика событий немного более легко обслуживаемо, чем встроенный обработчик, но оно все еще страдает от некоторых тех же препятствий. Например, попытка установить несколько отдельных свойств + onclick + приведет к перезаписи всех, кроме последнего, как показано ниже.
const p = document.querySelector('p'); const button = document.querySelector('button'); const changeText = () => < p.textContent = "Will I change?"; >const alertText = () => < alert('Will I alert?'); >// Events can be overwritten button.onclick = changeText; button.onclick = alertText;В приведенном выше примере щелчок + button + будет отображать только предупреждение, а не изменять текст + p + , поскольку код + alert () + был последним, добавленным к свойству.
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-5.png [Окончательный ответ с помощью обработчика событий events.html]
С пониманием как встроенных обработчиков событий, так и свойств обработчиков событий, давайте перейдем к слушателям событий.
Слушатели событий
Последнее дополнение к обработчикам событий JavaScript — слушатели событий. * Слушатель событий * отслеживает событие в элементе. Вместо того, чтобы назначать событие непосредственно свойству элемента, мы будем использовать метод + addEventListener () + для прослушивания события.
+ addEventListener () + принимает два обязательных параметра — событие, которое он ожидает, и функцию обратного вызова слушателя.
HTML-код для нашего прослушивателя событий будет таким же, как и в предыдущем примере.
Мы по-прежнему будем использовать ту же функцию + changeText () + , что и раньше. Мы добавим к кнопке метод + addEventListener () + .
// Function to modify the text content of the paragraph const changeText = () => < const p = document.querySelector('p'); p.textContent = "I changed because of an event listener."; >// Listen for click event const button = document.querySelector('button'); button.addEventListener('click', changeText);Обратите внимание, что в первых двух методах событие click упоминалось как + onclick + , но в случае прослушивателей событий оно упоминалось как + click + . Каждый слушатель события отбрасывает + on + из слова. В следующем разделе мы рассмотрим другие примеры других типов событий.
Когда вы перезагрузите страницу с кодом JavaScript выше, вы получите следующий вывод:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-6.png [ответ слушателя событий на events.html]
На первый взгляд слушатели событий кажутся очень похожими на свойства обработчика событий, но у них есть несколько преимуществ. Мы можем установить несколько прослушивателей событий для одного элемента, как показано в примере ниже.
const p = document.querySelector('p'); const button = document.querySelector('button'); const changeText = () => < p.textContent = "Will I change?"; >const alertText = () => < alert('Will I alert?'); >// Multiple listeners can be added to the same event and element button.addEventListener('click', changeText); button.addEventListener('click', alertText);В этом примере сработают оба события, предоставляя пользователю как предупреждение, так и измененный текст после нажатия на предупреждение.
Часто анонимные функции будут использоваться вместо ссылки на функцию в прослушивателе событий. Анонимные функции — это функции, которые не названы.
// An anonymous function on an event listener button.addEventListener('click', () => < p.textContent = "Will I change?"; >);Также можно использовать функцию + removeEventListener () + для удаления одного или всех событий из элемента.
// Remove alert function from button element button.removeEventListener('click', alertText);Кроме того, вы можете использовать + addEventListener () + для объектов + document и` + window`.
Слушатели событий в настоящее время являются наиболее распространенным и предпочтительным способом обработки событий в JavaScript.
Общие события
Мы узнали о встроенных обработчиках событий, свойствах обработчиков событий и прослушивателях событий, используя событие click, но в JavaScript есть еще много событий. Мы рассмотрим некоторые из наиболее распространенных событий ниже.
События мыши
События мыши являются одними из наиболее часто используемых событий. Они относятся к событиям, которые включают нажатие кнопок мыши или зависание и перемещение указателя мыши. Эти события также соответствуют эквивалентным действиям на сенсорном устройстве.
Fires when the mouse is pressed and released on an element
Fires when an element is clicked twice
Fires when a pointer enters an element
Fires when a pointer leaves an element
Fires every time a pointer moves inside an element
+ Click + — это составное событие, которое состоит из комбинированных событий + mousedown + и + mouseup + , которые запускаются, когда кнопка мыши нажимается или поднимается, соответственно.
Использование + mouseenter + и + mouseleave + в тандеме воссоздает эффект наведения, который сохраняется до тех пор, пока указатель мыши находится на элементе.
События формы
События формы — это действия, которые относятся к формам, таким как элементы + input + , которые выбираются или не выбираются, и формы, которые отправляются.
Fires when a form is submitted
Fires when an element (such as an input) receives focus
Fires when an element loses focus
Focus достигается, когда элемент выбран, например, с помощью щелчка мыши или перехода к нему с помощью клавиши + TAB + .
JavaScript часто используется для отправки форм и отправки значений на внутренний язык. Преимущество использования JavaScript для отправки форм заключается в том, что для отправки формы не требуется перезагрузка страницы, а JavaScript можно использовать для проверки необходимых полей ввода.
События клавиатуры
События клавиатуры используются для обработки действий клавиатуры, таких как нажатие клавиши, поднятие клавиши и удержание клавиши.
Fires once when a key is pressed
Fires once when a key is released
Fires continuously while a key is pressed
Хотя они выглядят одинаково, события + keydown + и + keypress + не обращаются ко всем одинаковым клавишам. Хотя + keydown + будет подтверждать каждую нажатую клавишу, + клавиша + будет пропускать клавиши, которые не производят символ, например + SHIFT + , + ALT + или + DELETE + .
События клавиатуры имеют определенные свойства для доступа к отдельным клавишам.
Если параметр, известный как объект + event + , передается в прослушиватель событий, мы можем получить дополнительную информацию о произошедшем действии. Три свойства, которые относятся к объектам клавиатуры, включают + keyCode ,` + key` и + code .
Например, если пользователь нажимает клавишу + a + на своей клавиатуре, появятся следующие свойства, относящиеся к этой клавише:
A number pertaining to the key
Represents the character name