Пользовательские события в JavaScript

Многие из написанного нами кода включают реакцию на события. События ввода-вывода, такие как щелчки мыши или события клавиатуры. Сетевые события, когда вы слушаете HTTP-вызов.

Это то, что я называю встроенными событиями.

В JavaScript мы можем создавать собственные события, и способ их работы меняется в браузере и в Node.js.

Во внешнем интерфейсе мы используем объект Event, предоставляемый браузером:

const anEvent = new Event('start');

Вы можете вызвать событие, используя

document.dispatchEvent(anEvent)

и когда это происходит, срабатывает прослушиватель событий:

document.addEventListener('start', event => {   
  console.log('started!')
})

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

const anotherEvent = new CustomEvent('start', {
  detail: {
    color: 'white'
  }
})

С помощьюCustomEvent, в прослушивателе событий вы можете запросить данные у объекта события, используяevent.detail(нельзя использовать другое свойство):

document.addEventListener('start', event => {   
  console.log('started!')
  console.log(event.detail)
})

Что касается серверной части, Node предлагает нам возможность построить аналогичную систему, используяeventsмодуль.

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

Вы инициализируете это, используя

const EventEmitter = require('events')
const eventEmitter = new EventEmitter()

Этот объект демонстрирует, среди многих других,onиemitметоды.

  • emitиспользуется для запуска события
  • onиспользуется для добавления функции обратного вызова, которая будет выполняться при срабатывании события

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

eventEmitter.on('start', () => {
  console.log('started')
})

Когда мы бежим

eventEmitter.emit('start')

запускается функция обработчика событий, и мы получаем журнал консоли.

Вы можете передать аргументы обработчику событий, передав их в качестве дополнительных аргументов вemit():

eventEmitter.on('start', (number) => {
  console.log(`started ${number}`)
})

eventEmitter.emit(‘start’, 23)

Несколько аргументов:

eventEmitter.on('start', (start, end) => {
  console.log(`started from ${start} to ${end}`)
})

eventEmitter.emit(‘start’, 1, 100)

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: