Объект события Event — JavaScript — Дока

Кратко

Скопировано

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

ℹ️

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

Пример

Скопировано

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

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

element.addEventListener('click', function (event) {    console. log(event)})
          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, но в том числе предотвращает вызов обработчиков события, которые были установлены на этом же элементе.

☝️

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

Как понять

Скопировано

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

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

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

Примеры

Скопировано

Системное событие
Скопировано

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

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

window.addEventListener('offline', function() {  alert('Отсутствует подключение к интернету')})
          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)
          
 
const myEvent = new CustomEvent('my-event', {
    detail: {
            spicy: 123,
        },
})
window.addEventListener('my-event', function(evt) {
  console.log('В поле spicy:', evt. detail.spicy)
})
window.dispatchEvent(myEvent)

На практике

Скопировано

Павел Минеев советует

Скопировано

🛠 В событии есть два похожих поля: target и currentTarget. Их отличие легко увидеть на примере.

Создадим кнопку, положим в неё текст, обёрнутый в тег

<span>, и навесим обработчик событий на кнопку. При клике на кнопку можно заметить, что currentTarget всегда будет кнопкой, на которой обрабатывается событие. При этом target будет меняться в зависимости от того, куда на кнопке мы кликнули — на span внутри кнопки или на неё саму.

<button type="button">  <span>Моя кнопочка</span></button>
          <button type="button">
  <span>Моя кнопочка</span>
</button>

document.querySelector('.button').addEventListener('click', function (event) {  console.log('Событие инициировано на', event.
 
 target)  console.log('Событие поймано на', event.currentTarget)})
          document.querySelector('.button').addEventListener('click', function (event) {
  console.log('Событие инициировано на', event.target)
  console.log('Событие поймано на', event.currentTarget)
})
Открыть демо в новой вкладке

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

target — это элемент, на котором произошло событие. Оно может не совпадать с

currentTarget, потому что большинство событий всплывают.

События в Javascript

HTML события это такая «вещь», которая временами происходит с HTML элементами.

HTML событие может быть неким действием, которое делает браузер или пользователь.

При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.

Вот несколько примеров HTML событий:

  • HTML страница закончила загружаться
  • Поле ввода было изменено
  • Пользователь нажал на HTML кнопку

Часто, при возникновении HTML события необходимо что-то сделать. JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий, в которые и можно добавить JavaScript код:

С одинарными кавычками:
<элемент событие=’код JavaScript‘>

С двойными кавычками:
<элемент событие=»код JavaScript«>

В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:

<button>
	Какая сейчас дата и время?
</button>

В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с

id=»demo» и выведет в него текущую дату и время.

В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):

<button>
	Какая сейчас дата и время?
</button>

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

<button>
	Какая сейчас дата и время?
</button>

Часто используемые HTML события

Ниже приводится список некоторых часто используемых HTML событий:

СобытиеОписание
onchangeHTML элемент был изменен
onclickПользователь кликнул мышкой на HTML элемент
onmouseoverПользователь навел мышку на HTML элемент
onmouseoutПользователь вывел мышку за пределы HTML элемента
onkeydownПользователь нажал на клавишу клавиатуры
onloadБраузер закончил загружать страницу

Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.

Что может делать JavaScript с событиями?

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

  • Выполнять действия повторяющиеся после загрузки страницы
  • Выполнять действия повторяющиеся после закрытия страницы
  • Действия, которые должны выполняться при нажатии пользователем на кнопку
  • Проверка данных, введенных пользователем в поле формы
  • И многое другое …

В JavaScript существует множество способов работать с событиями:

  • HTML атрибуты-события могут напрямую выполнять код JavaScript
  • HTML атрибуты-события могут вызывать функции JavaScript
  • Вы можете установить собственную функцию обработки события
  • Вы можете запретить отправку и обработку события
  • И многое другое …
Событие

— веб-API | MDN

Интерфейс

Event представляет событие, происходящее в DOM.

Событие может быть вызвано действием пользователя, например. щелчок по кнопке мыши или нажатие на клавиатуру или сгенерированный API для представления хода выполнения асинхронной задачи. Его также можно активировать программно, например, вызвав метод HTMLElement.click() элемента или определив событие, а затем отправив его в указанную цель, используя EventTarget.dispatchEvent() .

Существует множество типов событий, некоторые из которых используют другие интерфейсы, основанные на основном интерфейсе

Event . Само событие содержит свойства и методы, общие для всех событий.

Многие элементы DOM можно настроить так, чтобы они принимали (или «прослушивали») эти события и выполняли код в ответ на их обработку (или «обработку»). Обработчики событий обычно подключаются (или «прикрепляются») к различным элементам HTML (таким как

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

В дополнение к нажмите , вы можете прослушивать любое событие браузера по имени. Например: @mouseenter , @keyup и т. д. — все они являются допустимым синтаксисом.

Допустим, вы хотите прослушать нажатие клавиши enter внутри элемента . Alpine делает это легко, добавляя .enter следующим образом:

Вы даже можете комбинировать модификаторы клавиш для прослушивания комбинаций клавиш, таких как нажатие введите , удерживая shift :

 
  shift.enter="...">

При реагировании на события браузера часто необходимо "предотвратить поведение по умолчанию" (предотвратить поведение по умолчанию события браузера).

Например, если вы хотите прослушать отправку формы, но запретить браузеру отправлять запрос формы, вы можете использовать .prevent :

 
 
.. .

Вы также можете применить .stop для достижения эквивалента event.stopPropagation() .

Иногда вам может понадобиться получить доступ к собственному объекту события браузера внутри вашего собственного кода. Чтобы упростить эту задачу, Alpine автоматически вводит магическую переменную $event :

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

Alpine предоставляет волшебного помощника с именем $dispatch для этого:

Как видите, при нажатии кнопки Alpine отправит событие браузера с именем "foo", и наш прослушиватель @foo на

подхватит его и отреагирует на него.

Из-за характера событий в браузере иногда полезно прослушивать события в объекте окна верхнего уровня.

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

 
  
.
No related posts.