xin
Es muy fácil usar eventEmitter en node.js:
var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');
¿Algún EventEmitter del lado del cliente en el navegador nativo?
Puntilla
En los navegadores modernos, existe EventTarget.
class MyClass extends EventTarget {
doSomething() {
this.dispatchEvent(new Event('something'));
}
}
const instance = new MyClass();
instance.addEventListener('something', (e) => {
console.log('Instance fired "something".', e);
});
instance.doSomething();
Recursos adicionales:
-
Maga Zandaqo tiene una excelente guía detallada aquí: https://medium.com/@zandaqo/eventtarget-the-future-of-javascript-event-systems-205ae32f5e6b
-
MDN tiene algo de documentación: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
-
Polyfill para Safari y otros navegadores incapaces: https://github.com/ungap/event-objetivo
Amir Gorji
Hay un paquete NPM llamado “eventos” que le permite crear emisores de eventos en un entorno de navegador.
const EventEmitter = require('events')
const e = new EventEmitter()
e.on('message', function (text) {
console.log(text)
})
e.emit('message', 'hello world')
en tu caso es
const EventEmitter = require('events')
const e = new EventEmitter();
e.on('happy', function() {
console.log('good');
});
e.emit('happy');
-
OP está buscando trabajar en una implementación nativa en un navegador que no requiera un paquete npm.
– Iván
9 oct 2020 a las 7:42
-
Las respuestas de @Ivan SO no son solo para el OP. 😉 Esta es la respuesta que buscaba, y viendo los votos, también de otras personas. Quiero que el mismo código funcione en ambos entornos.
– Íñigo
10 de abril a las 3:34
Alparslán
Esto es suficiente para el caso dado.
class EventEmitter{
constructor(){
this.callbacks = {}
}
on(event, cb){
if(!this.callbacks[event]) this.callbacks[event] = [];
this.callbacks[event].push(cb)
}
emit(event, data){
let cbs = this.callbacks[event]
if(cbs){
cbs.forEach(cb => cb(data))
}
}
}
Actualización: acabo de publicar una versión un poco más evolucionada. Es muy simple pero probablemente suficiente:
https://www.npmjs.com/package/alpeventemitter
-
Mecanografiado:
callbacks: { [s: string]: ((...args: any[]) => any)[] }
– Mathieu CAROFF
4 de enero de 2020 a las 11:43
-
Esto dará como resultado un manejo de eventos desordenado cuando un controlador de eventos emita otro evento. Probablemente desee llamar a las devoluciones de llamada en emit después de que regrese, con setTimeout. O poner los eventos en una cola.
– Vinicius Fortuna
28 de julio de 2021 a las 16:39
xin
Cree un evento personalizado en el cliente y adjúntelo al elemento dom:
var event = new Event('my-event');
// Listen for the event.
elem.addEventListener('my-event', function (e) { /* ... */ }, false);
// Dispatch the event.
elem.dispatchEvent(event);
Esto se refiere desde: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
Gracias Naeem Shaikh
Terminé usando esto:
export let createEventEmitter = () => {
let callbackList: (() => any)[] = []
return {
on(callback: () => any) {
callbackList.push(callback)
},
emit() {
callbackList.forEach((callback) => {
callback()
})
},
}
}
Nir
Actualización de 2022: BroadcatsChannel puede proporcionar una solución.
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
Juan Haugeland
El nodo obtuvo un objetivo de evento nativo en el nodo 15 (octubre de 2020); esta pregunta ya no se aplica
https://nodejs.org/api/events.html#eventtarget-and-event-api
-
esta pregunta es sobre el navegador, no del lado del servidor
– Alguien especial
22 de noviembre a las 7:53
desarrollador.mozilla.org/en-US/docs/Web/Guide/Events/…
– Naeem Shaikh
23 de agosto de 2017 a las 6:19
@NaeemShaikh Tú eres el hombre. ¿Pondrás la respuesta? Cerraré esto. Gracias amigo
– Xin
23 de agosto de 2017 a las 6:56