Eventos personalizados en JavaScript

Muchos de los códigos que escribimos implican reaccionar a eventos. Eventos de E / S como clics del mouse o eventos de teclado. Eventos de red, cuando escuchas una llamada HTTP.

Esos son los que llamo eventos integrados.

En JavaScript podemos crear eventos personalizados, y la forma en que funciona cambia en el navegador y en Node.js.

En la interfaz usamos el objeto Event que proporciona el navegador:

const anEvent = new Event('start');

Puede activar el evento usando

document.dispatchEvent(anEvent)

y cuando esto sucede, se activa el detector de eventos:

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

Puede enviar datos personalizados utilizando elCustomEventobjeto incorporado en lugar deEvent, que acepta un objeto como segundo parámetro:

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

UsandoCustomEvent, en el detector de eventos puede pedir los datos al objeto de evento usandoevent.detail(no puedes usar otra propiedad):

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

En el lado del backend, Node nos ofrece la opción de construir un sistema similar usando eleventsmódulo.

Este módulo, en particular, ofrece laEventEmitterclass, que usaremos para manejar nuestros eventos.

Inicializas eso usando

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

Este objeto expone, entre muchos otros, elonyemitmétodos.

  • emitse utiliza para desencadenar un evento
  • onse usa para agregar una función de devolución de llamada que se ejecutará cuando se active el evento

Por ejemplo, creemos unstartevento, y como una cuestión de proporcionar una muestra, reaccionamos a eso simplemente iniciando sesión en la consola:

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

Cuando corremos

eventEmitter.emit('start')

se activa la función del controlador de eventos y obtenemos el registro de la consola.

Puede pasar argumentos al controlador de eventos pasándolos como argumentos adicionales aemit():

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

eventEmitter.emit(‘start’, 23)

Múltiples argumentos:

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

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


Más tutoriales de js: