TOC

Понимание событий в JavaScript

Вступление

В серии Understanding DOM мы обсудили https://www.digitalocean.com/community/tutorials / Понимание дерева деревьев и узлов [дерево DOM] и как access traverse, https://www.digitalocean.com/community/tutorials/how-to-make-changes- to-the-dom [добавить и удалить], а также modify узлы и элементы, использующие Developer Tools Console.

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

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

  • Страница заканчивается загрузкой

  • Пользователь нажимает кнопку

  • Пользователь наводит курсор на выпадающий список

  • Пользователь отправляет форму

  • Пользователь нажимает клавишу на клавиатуре

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

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

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

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

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

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

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

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

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

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

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

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

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

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

events.html

<!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>

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

events.html

<!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 +.

JS / events.js

// 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, вы увидите страницу, которая выглядит следующим образом:

изображение: 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 () "+ в разметку:

events.html

...
<body>

   <button>Click me</button>

   <p>I will change.</p>

</body>
...

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

JS / events.js

// 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 + приведет к перезаписи всех, кроме последнего, как показано ниже.

JS / events.js

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-код для нашего прослушивателя событий будет таким же, как и в предыдущем примере.

events.html

...
   <button>Click me</button>

   <p>I will change.</p>
...

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

JS / events.js

// 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]

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

JS / events.js

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 есть еще много событий. Мы рассмотрим некоторые из наиболее распространенных событий ниже.

События мыши

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

Event Description

click

Fires when the mouse is pressed and released on an element

dblclick

Fires when an element is clicked twice

mouseenter

Fires when a pointer enters an element

mouseleave

Fires when a pointer leaves an element

mousemove

Fires every time a pointer moves inside an element

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

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

События формы

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

Event Description

submit

Fires when a form is submitted

focus

Fires when an element (such as an input) receives focus

blur

Fires when an element loses focus

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

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

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

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

Event Description

keydown

Fires once when a key is pressed

keyup

Fires once when a key is released

keypress

Fires continuously while a key is pressed

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

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

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

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

Property Description Example

keyCode

A number pertaining to the key

65

key

Represents the character name

a

code

Represents the physical key being pressed

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 + `.

OutputkeyCode: 65
key: a
code: KeyA

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <p></p>

</body>
</html>

Затем введите следующий код JavaScript в Developer вашего браузера.

// 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 + - вы увидите вывод, подобный следующему:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-7.png [Пример объекта первого события]

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

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

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

<!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 с JavaScript в консоли разработчика нашего браузера, мы можем поместить один прослушиватель событий во внешний` + раздел элемента` и получить наиболее глубоко вложенный элемент.

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
   console.log(event.target);
});

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

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-8.png [Пример объекта второго события]

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

Заключение

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

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

Related