События в JavaScript
Ранее вы уже ознакомились с деревом и узлами DOM, а также научились обращаться, перемещаться, добавлять, удалять и изменять узлы и элементы с помощью консоли разработчика.
На данный момент вы можете вносить в DOM практически любые изменения, но с точки зрения пользователя это не очень полезно, потому что вы делаете это только вручную. Узнав немного больше о событиях в JavaScript, вы поймете, как связать все вместе, чтобы сделать интерактивный сайт.
События – это действия в браузере, которые могут быть инициированы пользователем или самим браузером. Ниже приведены несколько примеров общих событий, которые могут произойти на веб-сайте:
- Страница заканчивает загружаться
- Пользователь нажимает кнопку
- Пользователь наводит мышь на выпадающее меню
- Пользователь заполняет форму
- Пользователь нажимает клавишу на своей клавиатуре
Кодируя ответы JavaScript, которые выполняются при событии, разработчики могут отображать пользователям сообщения, проверять данные, реагировать на нажатие кнопки и выполнять многие другие действия.
В этой статье вы узнаете, что такое обработчики, прослушиватели и объекты событий. Также мы рассмотрим нескольких наиболее распространенных событий и три разных способа написания кода для их обработки. Эти знания помогут вам сделать более интерактивный веб-интерфейс для конечных пользователей.
Обработчики и прослушиватели событий
Когда пользователь нажимает кнопку или клавишу, происходит событие. Такие события называются событием клика или событием нажатия клавиши соответственно.
Обработчик событий – это функция JavaScript, которая запускается при срабатывании события.
Прослушиватель событий присоединяет чувствительный интерфейс к элементу, который позволяет этому элементу ждать начала конкретного события.
Существует три способа присвоения событий элементам:
- Встроенные (inline) обработчики событий
- Свойства обработчика событий
- Прослушиватели событий
Мы рассмотрим все три метода, а затем обсудим плюсы и минусы каждого из них.
Inline-обработчики событий
Сначала рассмотрим обработчик событий inline. Начнем с очень простого примера, состоящего из элемента кнопки (button ) и элемента p. Мы хотим, чтобы пользователь нажал кнопку, чтобы изменить текстовое содержимое p.
Начнем с HTML-страницы с кнопкой в теле. Сошлитесь на файл JavaScript, в который вы добавите немного кода.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Events</title>
</head>
<body>
<!-- Add button -->
<button>Click me</button>
<p>Try to change me.</p>
</body>
<!-- Reference JavaScript file -->
<script src="js/events.js"></script>
</html>
Непосредственно в button добавьте атрибут onclick. Значением атрибута будет функция changeText().
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Events</title>
</head>
<body>
<button onclick="changeText()">Click me</button>
<p>Try to change me.</p>
</body>
<script src="js/events.js"></script>
</html>
Теперь создайте файл events.js, который мы разместили здесь в каталоге js/. В нем нужно создать функцию changeText (), которая изменит textContent элемента p.
// Function to modify the text content of the paragraph
const changeText = () => {
const p = document.querySelector('p');
p.textContent = "I changed because of an inline event handler.";
}
Откройте events.html в браузере, и вы увидите страницу с кнопкой и текстом:
Try to change me
Однако, когда вы или другой пользователь нажимаете на кнопку, текст тэга p будет меняться: вместо «Try to change me» появится «I changed because of an inline event handler.».
Inline-обработчики событий – это простой способ начать работать с событиями, но обычно они не используются нигде, кроме тестирования и учебных задач.
Сравнить inline обработчики событий можно с встроенными стилями CSS в HTML-элементе. Гораздо практичнее поддерживать отдельную таблицу стилей, чем создавать встроенные стили для каждого элемента; аналогично, более целесообразно поддерживать JavaScript, который обрабатывается полностью через отдельный файл сценария, чем добавлять обработчики к каждому элементу.
Свойства обработчика событий
Следующим шагом являются свойства обработчика события. Это очень похоже на inline-обработчик, только вместо атрибута в HTML устанавливается свойство элемента в JavaScript.
Настройка будет выглядеть почти так же, за исключением того, что вам больше не нужно включать строку onclick=”changeText ()”.
...
<body>
<button>Click me</button>
<p>I will change.</p>
</body>
...
Функция останется аналогичной, но теперь вам нужно получить доступ к элементу button в JavaScript. Можно просто получить доступ к onclick так же, как при обращении к стилю, идентификатору или любому другому свойству элемента, а затем присвоить ссылку функции.
// 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;
Примечание: Обработчики событий не следуют соглашению camelCase, которого придерживается большинство JavaScript-кодов. Обратите внимание, что нужно писать onclick, а не onClick.
При первой загрузке страницы браузер отобразит кнопку Click me и сообщение «I will change.»
Нажмите кнопку, после чего вместо текущего сообщения появится текст «I changed because of an inline event handler.»
Обратите внимание, что при передаче ссылки функции на свойство onclick мы не включаем круглые скобки, так как мы не вызываем функцию в этот момент, а только передаем ссылку на нее.
Свойство обработчика событий немного более удобно, чем inline обработчик, но этот метод имеет похожие недостатки. Например, попытка установить несколько отдельных свойств 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;
В приведенном выше примере нажатие кнопки будет отображать только предупреждение, а текст p не изменится, поскольку код alert() был добавлен в свойство последним.
Прослушиватели событий
Последним дополнением к обработчикам JavaScript являются прослушиватели событий. Прослушиватель наблюдает за событием элемента. Вместо того чтобы присваивать событие непосредственно свойству элемента, для прослушивания события нужно использовать метод addEventListener().
addEventListener() принимает два обязательных параметра – событие, которое он должен прослушивать, и функцию обратного вызова прослушивателя.
HTML для прослушивателя событий будет таким:.
...
<button>Click me</button>
<p>I will change.</p>
...
Мы по-прежнему используем ту же функцию 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, вы получите кнопку Click me и сообщение «I changed because of an event listener».
На первый взгляд, прослушиватели событий кажутся очень похожими на свойства обработчика событий, но у них есть несколько преимуществ. К примеру, вы можете установить несколько прослушивателей событий на один и тот же элемент, как показано в примере ниже.
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.
Основные типы событий
Теперь вы знаете, что такое inline обработчики событий, свойства обработчика событий и прослушиватели событий. Все эти методы мы рассмотрели на примере событие click, но в JavaScript есть еще много событий. Мы рассмотрим несколько наиболее распространенных типов.
События мыши
События мыши являются одними из наиболее часто используемых событий. К ним относятся нажатия кнопок мыши, наведение и перемещение курсора мыши. Эти события также включают аналогичные действия на сенсорном устройстве.
| Событие | Описание |
| click | Запускается при нажатии и отпускании кнопки мыши на элементе |
| dblclick | Запускается при двойном клике по элементу |
| mouseenter | Запускается, когда курсор входит в элемент |
| mouseleave | Запускается, когда курсор покидает элемент |
| mousemove | Запускается каждый раз, когда курсор перемещается внутри элемента |
Событие click – клик, сложное событие, состоящее из комбинированных событий mousedown и mouseup.
Использование mouseenter и mouseleave в связке воссоздает эффект зависания, который продолжается до тех пор, пока указатель мыши находится на элементе.
События формы
События формы – это действия, которые относятся к формам (например, выбор или удаление элементов ввода, отправка формы и т.п.).
| Событие | Описание |
| submit | Запускается при отправке формы |
| focus | Запускается, когда элемент (например, input) находится в фокусе |
| blur | Запускается, когда элемент теряет фокус |
Фокус достигается, когда пользователь выбирает элемент, например, с помощью щелчка мыши или перехода к нему с помощью клавиши TAB.
JavaScript часто используется для отправки форм и значений на язык бэкэнда. Преимущество использования JavaScript для отправки форм заключается в том, что он не требует перезагрузки страницы для отправки формы. Также JavaScript может использоваться для проверки необходимых полей ввода.
События клавиатуры
События клавиатуры используются для обработки действий клавиатуры, таких как нажатие клавиши, подъем и удержание клавиши.
| Событие | Описание |
| keydown | Запускается один раз при нажатии клавиши |
| keyup | Запускается один раз, когда клавиша отпускается |
| keypress | Постоянно срабатывает при нажатии клавиши |
Хотя keydown и keypress выглядят одинаково, они не имеют доступа к одним и тем же клавишам. keydown будет подтверждать каждую нажатую клавишу, а keypress пропускает клавиши, которые не создают символ, например SHIFT, ALT или DELETE.
События клавиатуры имеют особые свойства для доступа к отдельным клавишам.
Если параметр, известный как объект event, передается прослушивателю событий, вы можете получить дополнительную информацию о действии, которое произошло. К объектам клавиатуры относятся свойства keyCode, key, и code.
Например, если пользователь нажимает на клавишу «А» на своей клавиатуре, свойства будут выглядеть следующим образом:
| Свойства | Описание | Пример |
| keyCode | Число, относящееся к ключу | 65 |
| key | Представляет символ | a |
| code | Представляет нажатую физическую клавишу | KeyA |
Чтобы показать, как собирать эту информацию через консоль JavaScript, можно написать следующий код.
// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
console.log('key: ' + event.keyCode);
console.log('key: ' + event.key);
console.log('code: ' + event.code);
});
Когда вы нажмете Enter в консоли, вы сможете нажать клавишу на клавиатуре (в этом примере это будет a).
keyCode: 65
key: a
code: KeyA
Свойство keyCode – это число, которое относится к нажатой клавише. Свойство key – это имя символа, которое может измениться (например, нажатие клавиши a с помощью SHIFT приведет к символу A). Свойство code представляет собой физическую клавишу на клавиатуре.
Примечание: Обратите внимание, что keyCode находится в процессе устаревания, и в новых проектах предпочтительно использовать свойство code.
Полный список событий вы найдете на Mozilla Developer Network.
Объекты Event
Объект Event состоит из свойств и методов, к которым могут обращаться все события. В дополнение к универсальному объекту Event каждый тип события имеет свои собственные расширения, такие как KeyboardEvent и MouseEvent.
Объект Event передается в качестве параметра через функцию прослушивателя. Обычно он записывается как event или e. Мы можем получить доступ к свойству code события keydown для репликации элементов управления клавиатурой ПК.
Попробуйте создать базовый HTML-файл с тегами <p> и загрузите его в браузер.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Events</title>
</head>
<body>
<p></p>
</body>
</html>
Затем введите следующий код JavaScript в консоль.
Читайте также: Использование консоли разработчика JavaScript
// Pass an event through to a listener
document.addEventListener('keydown', event => {
var element = document.querySelector('p');
// Set variables for keydown codes
var a = 'KeyA';
var s = 'KeyS';
var d = 'KeyD';
var w = 'KeyW';
// Set a direction for each code
switch (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 – вы увидите в консоли Left, Down, Right или Up.
Теперь вы можете продолжить работу над тем, как браузер будет реагировать на клавиши, и создать более динамичный веб-сайт.
Давайте рассмотрим одно из наиболее часто используемых свойств события: свойство target. В следующем примере есть три элемента div внутри одного section.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Events</title>
</head>
<body>
<section>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</section>
</body>
</html>
Используя event.target в консоли браузера, вы можете разместить один прослушиватель событий на элементе внешнего section и получить вложенный элемент.
const section = document.querySelector('section');
// Print the selected target
section.addEventListener('click', event => {
console.log(event.target);
});
Клик по любому из этих элементов возвращает результат соответствующего элемента в консоль, используя event.target. Это очень удобно, так как позволяет использовать всего один прослушиватель событий для доступа ко многим вложенным элементам.
С помощью объекта Event можно настроить действия, связанные со всеми событиями.
Заключение
События – это действия, которые происходят на веб-сайте, такие как клик, наведение курсора, отправка формы, загрузка страницы или нажатие клавиши на клавиатуре. JavaScript становится по-настоящему интерактивным и динамичным, когда вы можете заставить веб-сайты реагировать на действия пользователей.
В этом мануале вы узнали, что такое события. Также мы рассмотрели примеры общих событий, объяснили разницу между обработчиками и прослушивателями событий. Используя эти знания, вы сможете создавать динамические веб-сайты и приложения.
Tags: DOM, Javascript