Объект события Event

Объект Event описывает событие, произошедшее на странице, например, клики мышкой или ввод с клавиатуры

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

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

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

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

Свойства

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

Методы

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

Как понять

Секция статьи "Как понять"

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

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

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

Примеры

Секция статьи "Примеры"

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

Секция статьи "Системное событие"

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

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

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

        
        
          
        
      

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

Секция статьи "Программное событие"

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

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

        
          
          const myEvent = new CustomEvent('my-event', {    detail: {            spicy1: 123,        },})window.addEventListener('my-event', function(evt) {  console.log('My event is spicy:', evt.detail.spicy)})window.dispatchEvent(myEvent)
          const myEvent = new CustomEvent('my-event', {
    detail: {
            spicy1: 123,
        },
})

window.addEventListener('my-event', function(evt) {
  console.log('My event is spicy:', evt.detail.spicy)
})

window.dispatchEvent(myEvent)

        
        
          
        
      

На практике

Секция статьи "На практике"

Павел Минеев

Секция статьи "Павел Минеев"

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

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

        
          
          <button class="button" type="button">  <span>Моя кнопочка</span></button>
          <button class="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, потому что большинство событий всплывают.