1

Estoy queriendo usar eventos personalizados por Javascript, y la verdad que intente encontrar algo pero o no encuentro la información indicada o no la comprendo, por lo cual se me ocurrió hacer mi eventManager, bastante rustico la verdad pero es lo que puede hacer por el momento para no seguir frenado, el único problema que tengo es que no se como ejecutar mi handler dentro del objeto EventManager.

Aquí dejo el código a ver si alguien me puede ayudar.

Mi problema esta en esta linea, claramente esta mal pero no se como hacerlo this._events[i].handler (this._events[i].args).

var EventCustom=function() {
    this.eventName;
    this.handler;
    this.args;
};



var EventManager=function(siteController) {
    this.siteController=siteController;
    // es un array de objetos de tipo EventCustom
    this._events = [];
};

EventManager.EVENT_ON_USER_LOGIN = 'EVENT_ON_USER_LOGIN';


EventManager.prototype.addEventListener = function (evnt, handler,args)
{
    var tmpEvent = new EventCustom();
    tmpEvent.eventName = evnt;
    tmpEvent.handler = handler;
    tmpEvent.args = args;

    this._events.push(tmpEvent);

    //alert("addEventListener:"+this._events[0].eventName);
    //handler
} 

EventManager.prototype.dispatchEvent = function (evnt, args)
{


    for(var i=0; i< this._events.length; i++)
    {
        if(this._events[i].eventName == evnt)
        {
            **// aca deberia ejecutar el handler pero no me funciona
            //this._events[i].handler (this._events[i].args)//**
        }
    }

} 


var pruebaFn = function()
{
    alert("prueba");
}



var eventManager = new EventManager(this);
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN,pruebaFn);
eventManager.dispatchEvent(EventManager.EVENT_ON_USER_LOGIN);

Si ademas me quieren recomendar una mejor forma de hacerlo, buenísimo. La verdad es que estoy armando todo un sistema en Javascript y quiero pasar ciertas llamadas a eventos ya que es mucho mas ordenado.

3
  • ¿Por que sería necesario usar EventCustom? ¿Un simple Pub/Sub no te serviría?
    – Marcos
    el 19 dic. 2016 a las 14:59
  • Sugiero el uso del siguiente API github.com/Olical/EventEmitter/wiki
    – Lcop
    el 19 dic. 2016 a las 15:10
  • Para hacer eventos personalizados, no es más práctico usar CustomEvent? Que es JavaScript puro y duro y no necesitas generarte un prototipo sólo para esto? el 21 may. 2019 a las 15:29

2 respuestas 2

3

Sugiero el uso del siguiente API https://github.com/Olical/EventEmitter/wiki

En este api muestra como se pueden implementar eventos a nivel de javascript como se maneja en Node JS, es tan simple como:

//Generador de eventos
var event = new EventEmitter();
event.emit("nombreDeEvento", data);

//Cliente de eventos
event.on('nombreDeEvento', function(data){

});
0
2

Creo que el problema es que no le estas pasando ningún argumento.. Te he reescrito un poco el código y creo que hace los que estás buscando:

var EventCustom = function(evnt, handler, args) {
  this.eventName = evnt;
  this.handler = handler;
  this.args = args;
};

var EventManager = function(scope) {
  var that = scope;
  this._events = [];
};
EventManager.EVENT_ON_USER_LOGIN_1 = 'EVENT_ON_USER_LOGIN_1';
EventManager.EVENT_ON_USER_LOGIN_2 = 'EVENT_ON_USER_LOGIN_2';

EventManager.prototype.addEventListener = function(evnt, handler, args) {
  this._events.push(new EventCustom(evnt, handler, args));
}
EventManager.prototype.dispatchEvent = function(evnt, args) {
  for (event in this._events) {
    if (this._events[event].eventName === evnt) {
      this._events[event].handler(this._events[event].args);
    }
  }
}

var pruebaFn1 = function(args) {
  alert("pruebaFn " + args);
}
var pruebaFn2 = function(args) {
  alert("pruebaFn2 " + args);
}

var eventManager = new EventManager();
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN_1, pruebaFn1, "ok1");
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN_2, pruebaFn2, "ok2");
eventManager.dispatchEvent(EventManager.EVENT_ON_USER_LOGIN_1);

** Actualizo la respuesta con un código más óptimo ;)

var EventManager = function() {
  this._events = {};
};
EventManager.EVENT_ON_USER_LOGIN_1 = 'EVENT_ON_USER_LOGIN_1';
EventManager.EVENT_ON_USER_LOGIN_2 = 'EVENT_ON_USER_LOGIN_2';

EventManager.prototype.addEventListener = function(id, h, a) {
  var e = {handler: h,args: a};
  this._events[id] = (!this._events[id]) ? [] : this._events[id];
  this._events[id].push(e);
}
EventManager.prototype.dispatchEvent = function(id) {
  for (e in this._events[id]) {
      this._events[id][e].handler(this._events[id][e].args);
  }
}

var pruebaFn1 = function(args) {
  alert("pruebaFn1 " + args);
}
var pruebaFn2 = function(args) {
  alert("pruebaFn2 " + args);
}

var eventManager = new EventManager();
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN_1, pruebaFn1, "ok1a");
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN_1, pruebaFn1, "ok1b");
eventManager.addEventListener(EventManager.EVENT_ON_USER_LOGIN_2, pruebaFn2, "ok2");
eventManager.dispatchEvent(EventManager.EVENT_ON_USER_LOGIN_1);

5
  • Tu respuesta tiene varios detalles, por ejemplo: 1. ¿Cual sería el objetivo de crear un EventCustom en lugar de un objeto común y corriente? (En si no estas usando para nada el event creado). 2. En el método addEventListener, ¿para que serviría pasar args? (Realmente no le estas dando ningún uso). 3. En el método dispatchEvent, es poco óptimo ya que se recorre completamente el arreglo _events para ejecutar solo aquellos con el eventName indicado.
    – Marcos
    el 19 dic. 2016 a las 15:37
  • Más que nada era por seguir el código que Pablo utilizaba. el 19 dic. 2016 a las 16:03
  • Actualizo la respuesta con un código más optimo ;) el 19 dic. 2016 a las 16:04
  • ook editado otra vez, a ver que tal ;) el 19 dic. 2016 a las 16:53
  • Muchos mejor. Un último detalle, que se me olvido comentar es que, comúnmente los args, se pasan al emitir el evento, ya que es en ese punto donde se sabe que se quiere comunicar a todos los que escuchan/aguardan el evento.
    – Marcos
    el 19 dic. 2016 a las 17:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.