Événements personnalisés en JavaScript

Une grande partie du code que nous écrivons implique de réagir aux événements. Événements d'E / S tels que les clics de souris ou les événements de clavier. Événements réseau, lorsque vous écoutez un appel HTTP.

Ce sont ce que j'appelle des événements intégrés.

En JavaScript, nous pouvons créer des événements personnalisés et son fonctionnement change dans le navigateur et dans Node.js.

Dans le frontend, nous utilisons l'objet Event qui est fourni par le navigateur:

const anEvent = new Event('start');

Vous pouvez déclencher l'événement en utilisant

document.dispatchEvent(anEvent)

et lorsque cela se produit, l'écouteur d'événements est déclenché:

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

Vous pouvez envoyer des données personnalisées à l'aide duCustomEventobjet intégré au lieu deEvent, qui accepte un objet comme deuxième paramètre:

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

UtilisantCustomEvent, dans l'écouteur d'événements, vous pouvez demander les données à l'objet événement en utilisantevent.detail(vous ne pouvez pas utiliser une autre propriété):

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

Du côté du backend, Node nous offre la possibilité de construire un système similaire en utilisant leeventsmodule.

Ce module, en particulier, offre laEventEmitterclass, que nous utiliserons pour gérer nos événements.

Vous initialisez cela en utilisant

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

Cet objet expose, parmi tant d'autres, leonetemitméthodes.

  • emitest utilisé pour déclencher un événement
  • onest utilisé pour ajouter une fonction de rappel qui sera exécutée lorsque l'événement est déclenché

Par exemple, créons unstartévénement, et comme une question de fournir un échantillon, nous réagissons à cela en nous connectant simplement à la console:

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

Quand nous courons

eventEmitter.emit('start')

la fonction de gestionnaire d'événements est déclenchée et nous obtenons le journal de la console.

Vous pouvez passer des arguments au gestionnaire d'événements en les passant comme arguments supplémentaires àemit():

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

eventEmitter.emit(‘start’, 23)

Plusieurs arguments:

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

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

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: