Кратко §

Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой MouseEvent или ввод с клавиатуры KeyboardEvent. Существует множество различных событий с разным набор информации.

Обратите внимание на обзорную статью о событиях. В ней описываются примеры работы с событиями.

Пример §

Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.

При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click, обработчик будет вызван с событием MouseEvent:

element.addEventListener('click', function (event) {
    console.log(event)
})

Как пишется §

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

Свойства §

• bubbles – является ли данное событие всплывающим.
• cancelable – является ли событие отменяемым.
• currentTarget – указывает на элемент, на котором установлен обработчик события.
• defaultPrevented – отменено ли поведение события по умолчанию.
• eventPhase – указывает на фазу срабатывания события.
• isTrusted – указывает на происхождение события, будет в значении true, если событие инициировано действиями пользователя. false - если событие инициировано из кода с помощью dispatchEvent().
• target – ссылка на объект, которым было инициировано событие. Например, если событие произошло на поле ввода, мы получим ссылку на этот DOM элемент.
• timeStamp – время возникновения события в миллисекундах.
• type – тип события.

Методы §

• composedPath() – вернёт массив элементов, на которых сработает событие.
• preventDefault() – предотвращает дефолтное поведение события. Если вызвать этот метод на событии клика по ссылке, то переход по ссылке не произойдёт, но событие продолжит всплытие.
• stopPropagation() – предотвращает всплытие события.
• stopImmediatePropagation() – делает то же самое, что и stopPropagation, но в том числе предотвращает вызов обработчиков события, которые были установлены на этом же элементе.

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

Как понять §

Работа JavaScript основана на событийной модели – это значит, что для того, чтобы запустить какой-либо код, должно произойти событие. Даже код, который был написан в файле и не привязан к какому-либо событию, будет обработан после того, как произойдёт событие, которое сообщит браузеру, что код был загружен.

Событие может быть создано по следующим причинам:

• действие пользователя;
• системное событие;
• событие, созданное программно.

Примеры §

Системное событие §

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

Мы можем отслеживать состояние интернет-соединения и показывать сообщение, если оно пропало.

window.addEventListener('offline', function() {
  alert('Отсутствует подключение к интернету')
})

Программное событие §

Событие может быть создано с помощью кода, поле isTrusted в таком событии будет содержать значение false, а значит, мы будем знать, что событие было вызвано не системно и не пользователем.

Создадим своё событие и вызовем его на window:

const myEvent = new CustomEvent('my-event', {
    detail: {
            spicy: 123,
        },
})
 
window.addEventListener('my-event', function(evt) {
  console.log('В поле spicy:', evt.detail.spicy)
})
 
window.dispatchEvent(myEvent)