События

1. События

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

Существует много видов событий, рассмотрим некоторые из них.

• click - происходит, когда кликнули на элемент левой кнопкой мыши

• submit - посетитель отправил форму

• focus - посетитель фокусируется на элементе, например нажимает на input

• keydown - посетитель нажимает клавишу

Список доступных событий

1.1. Порядок срабатывания событий

Одно действие может вызывать несколько событий. Например клик вызывает сначала mousedown, а затем mouseup и click. В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click.

Каждое событие обрабатывается независимо. Например при клике, события mouseup и click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup, затем запускается click.

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

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

Методы elem.addEventListener() и elem.removeEventListener() - это современный способ назначить или удалить обработчик, при этом можно использовать сколько угодно обработчиков на одном типе события.

Overview of Events and Handlers

2.1. Метод elem.addEventListener()

Добавляет слушателя события на элемент.

element.addEventListener(event, handler[, phase])
Copy

• event - имя события, строка, например click

• handler - ссылка на функцию, которую надо поставить обработчиком

• phase - необязательный аргумент, фаза, на которой обработчик должен сработать. Указывается крайне редко.

Ссылка на пример в Codepen.io

2.1.1. addEventListener и this

Если мы передаем функцию, которая использует this, по умолчанию this внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод bind.

const user = {
  name: 'Mango',
  showName() {
    console.log(this);
    // this будет ссылаться на button если использовать showName как callback
    console.log(`My name is: ${this.name}`);
    // тут undefined так как поля name у button нет
  },
};

/*
 * Представим что у нас есть кнопка с классом js-btn
 * Выберем ее и повесим на нее слушатель клика
 */
const btn = document.querySelector('.js-btn');

user.showName(); //работает
btn.addEventListener('click', user.showName); // не работает
btn.addEventListener('click', user.showName.bind(user)); // работает
Copy

2.2. Метод elem.removeEventListener()

Удаляет слушателя. Аргументы те же, что у addEventListener.

element.removeEventListener(event, handler[, phase])
Copy

Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в addEventListener. Поэтому для callback используют отдельную функцию и передают ее по имени.

Ссылка на пример в Codepen.io

3. Объект события

Чтобы обработать событие, недостаточно знать о том, что это клик или нажатие клавиши. Могут понадобиться детали: текущее значение текстового поля, элемент, на котором произошло событие, встроенные методы и другое. Объект события содержит ценную информацию о деталях события и автоматически передается первым аргументом в обработчик события.

Документация объекта события

Некоторые свойства объекта события:

• event.type - тип события

• event.target - элемент, на котором произошло событие

• event.currentTarget - элемент, на котором сработал обработчик

Ссылка на пример в Codepen.io

4. Действия браузера по умолчанию

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

Например:

• Клик по ссылке инициирует переход на новый URL, указанный в href ссылки.

• Отправка формы — перезагрузку страницы.

Для отмены действия браузера по умолчанию на объекте события есть стандартный метод.

event.preventDefault()
Copy

4.1. Событие submit

Возникает при отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму у посетителя есть два способа:

• Нажать кнопку с type="submit"

• Нажать клавишу Enter, находясь в каком-нибудь поле формы

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. В обработчике этого события можно проверить данные и выполнить действия по результатам проверки.

Ссылка на пример в Codepen.io

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

Есть три основных события клавиатуры: keydown, keypress и keyup. При нажатии клавиши сначала происходит keydown, после чего keypress и только потом keyup, когда клавишу отжали.

События keydown и keyup срабатывают при нажатии любой клавиши, включая служебные. А вот keypress срабатывает, только если нажата символьная клавиша, т. е. нажатие приводит к появлению символа. Управляющие клавиши, такие как Ctrl, Shift, Alt и другие, не генерируют событие keypress.

5.1. KeyboardEvent.key и KeyboardEvent.code

Свойство KeyboardEvent.key доступно для чтения и возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш модификаторов, таких как shiftKey, а так же текущий язык и модель клавиатуры.

KeyboardEvent.key на MDN

Свойство KeyboardEvent.code представляет собой физическую клавишу на клавиатуре (в отличие от символа, сгенерированного нажатием клавиши). Другими словами, это свойство возвращает значение, которое не изменяется с помощью раскладки клавиатуры или состояния клавиш-модификаторов.

KeyboardEvent.code на MDN

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

Ссылка на пример в Codepen.io

6. События элементов форм

6.1. Фокусировка

Элемент получает фокус при нажатии на нем мышкой, клавиши Tab или выбрав на планшете. Момент получения фокуса и потери очень важен, при получении фокуса мы можем подгрузить данные для автозаполнения, начать отслеживать изменения. При потере фокуса — проверить введенные данные.

При фокусировке на элемент происходит событие focus, а когда фокус исчезает, например посетитель кликает в другом месте экрана, происходит событие blur.

По умолчанию многие элементы не могут получить фокус. Например, если кликнуть по div, то фокусировка на нем не произойдет. Кстати, фокус может быть только на одном элементе в единицу времени и текущий элемент, на котором фокус, доступен как document.activeElement.

Активировать или отменить фокус можно программно, вызвав в коде одноименные методы elem.focus() и elem.blur() у элемента.

6.2. Событие change

Происходит по окончании изменения элемента формы, когда изменение зафиксировано. Для input:text или textarea событие произойдёт не при каждом вводе, а при потере фокуса, что не всегда удобно.

Например пока вы набираете что-то в текстовом поле — события нет. Но как только фокус пропал, произойдет событие change. Для остальных же элементов, например select, input:checkbox и input:radio, оно срабатывает сразу при выборе значения.

6.3. Событие input

Срабатывает только на текстовых элементах, input:text и textarea, при изменении значения элемента. Не ждет потери фокуса, в отличие от change.

В современных браузерах input — самое главное событие для работы с текстовым элементом формы. Именно его, а не keydown или keypress, следует использовать.

7. Загрузка документа

При открытии веб-страницы, процесс загрузки HTML-документа условно состоит из трёх стадий. На каждую можно повесить обработчик, чтобы совершить действия.

• DOMContentLoaded — браузер полностью загрузил HTML и построил DOM-дерево.

• load — браузер загрузил все ресурсы.

• beforeunload и unload — уход со страницы.

7.1. DOMContentLoaded

Происходит на document когда все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.

document.addEventListener('DOMContentLoaded', callback)
Copy

Если в документе есть теги script, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов. Исключением являются скрипты с атрибутами async и defer, которые подгружаются асинхронно. Внешние файлы стилей никак не влияют на событие DOMContentLoaded.

Статья о DomContentLoaded

7.2. load

Событие срабатывает на window, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д. Его используют редко, поскольку обычно нет нужды ждать загрузки всех ресурсов.

7.3. unload

Когда человек уходит со страницы или закрывает окно, на window срабатывает событие unload. В нём можно сделать что-то, не требующее ожидания, например закрыть вспомогательные popup-окна, но отменить сам переход нельзя. Событие почти не используется — мало что можно сделать зная, что вкладка браузера сейчас закроется.

7.4. beforeunload

Событие срабатывает на window. Это стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу.

Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение. Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая – нужно ли переходить.