Javascript 类中的自定义事件

我需要从类中启动自定义事件。我知道使用triggerHandler，比如$（object）…triggerHandler（“inputChange”，{param:X}），可以对DOM对象和jquery执行此操作； 问题是，当我在一个类中尝试这样做时，如下所示：

    var MyClass = (function(){

        var static_var = 1;

        var MyClass = function () {

            var privateVar;
            var privateFn = function(){ alert('Im private!'); };

            this.someProperty = 5;
            this.someFunction = function () {
                alert('Im public!');
            };
            this.say = function() {
                alert('Num ' + this.someProperty);
                $(this).triggerHandler("eventCustom");
            }
            this.alter = function() {
                this.someProperty ++;
            }
        };

        return MyClass;

    })();

    TheClass = new MyClass();

    $(TheClass).on('eventCustom', function() {
        alert('Event!');
    });

    TheClass.say();

这不会启动警告或错误，但事件侦听器不工作（或事件未调度）。我认为jQuery事件系统不能与非DOM对象一起工作，对吗

是否有其他方式（我需要事件，而不是针对具体案例的回调）来启动事件

---

非常感谢

您对javascript工作原理的理解是有限的，因为您是从传统的OOP角度来理解它的。看看这把小提琴&你会发现你实际上可以把函数作为变量传递给其他函数。javascript中没有类，只有可以作为闭包的函数，这些闭包可以模拟传统类：

var MyClass = (function(){

    var static_var = 1;

    var MyClass = function ( callback ) {

        var privateVar;
        var privateFn = function(){ alert('Im private!'); };

        this.someProperty = 5;
        this.someFunction = function () {
            alert('Im public!');
        };
        this.say = function() {
            alert('Num ' + this.someProperty);
            callback();
        }
        this.alter = function() {
            this.someProperty ++;
        }
    };

    return MyClass;

})();

TheClass = new MyClass(function() {
    alert('Event!');
});

TheClass.say();

或者，您可以在“类”中创建一个函数来配置回调/触发器，而不是将其传递给构造函数

看看这个，作为你进一步阅读这个概念的开始

编辑

为了安抚那些寻找eventQueue的批评者，这里有一个更新的JSFIDLE:）

---

我在不使用JQuery的情况下，用不到100行代码编写了一个ES6事件类。如果不想使用DOM事件，可以扩展类，该类应该处理事件

对于收听事件，您可以使用on、once、onReady、onceReady。On是在每次触发标签时执行callback函数。只有一次。如果之前已经触发了标签，“ready”-函数执行回调

要触发事件，请使用触发器。要删除eventhandler，请使用off

我希望这个例子能说明：

class类事件6{
构造函数（）{
this.listeners=newmap（）；
this.onceListeners=newmap（）；
this.triggerdLabels=新映射（）；
}
//onReady和onceReady的帮助功能
//callbackfunction将执行，
//如果标签已经用最后调用的参数触发
_fCheckPast（标签，回调）{
if（this.triggerdLabels.has（label））{
回调（this.triggerdLabels.get（label））；
返回true；
}否则{
返回false；
}
}
//每次触发标签时执行回调
打开（标签、回调、checkpass=false）{
this.listeners.has（label）| this.listeners.set（label，[]）；
this.listeners.get（label.push（回调）；
如果（检查过去）
此._fCheckPast（标签、回调）；
}
//每次触发标签时执行回调
//检查标签是否已被调用
//如果是这样，立即执行回调
onReady（标签、回调）{
this.on（label，callback，true）；
}
//在触发标签时执行一次回调
一次（标签、回调、checkpass=false）{
this.onceListeners.has（label）| this.onceListeners.set（label，[]）；
如果（！（检查过去和此._fCheckPast（标签，回调）））{
//标签wurde nocht nicht aufgerufen und
//这是一个很好的例子
this.onceListeners.get（label.push（回调）；
}
}
//在触发标签时执行一次回调
//或者，如果已经调用了标签，则执行回调
onceReady（标签、回调）{
此参数为.once（标签、回调、true）；
}
//删除标签的回调
关闭（标签，回调=true）{
如果（回调===true）{
//删除所有CallbackFunction的侦听器
this.listeners.delete（标签）；
此.onceListeners.delete（标签）；
}否则{
//仅使用match callback函数删除侦听器
放手=（inListener）=>{
让listeners=inListener.get（标签）；
如果（侦听器）{
inListener.set（label，listeners.filter（（value）=>！（value==callback））；
}
};
_关（这个，听众）；
_关闭（此为onceListeners）；
}
}
//使用标签触发事件
触发器（标签，…参数）{
设res=false；
this.triggerdLabels.set（label，…args）；//保存onready和onceready的所有triggerd标签
let_trigger=（inListener，label，…args）=>{
让listeners=inListener.get（标签）；
if（侦听器和侦听器.length）{
forEach（（侦听器）=>{
侦听器（…args）；
});
res=真；
}
};
_触发器（this.onceListeners，label，…args）；
_触发器（this.listeners，label，…args）；
this.onceListeners.delete（label）；//回调一旦执行，就删除它。
返回res；
}
}
//+++从这里开始
var events = new function() {
  var _triggers = {};

  this.on = function(event,callback) {
      if(!_triggers[event])
          _triggers[event] = [];
      _triggers[event].push( callback );
    }

  this.triggerHandler = function(event,params) {
      if( _triggers[event] ) {
          for( i in _triggers[event] )
              _triggers[event][i](params);
      }
  }
};

var MyClass = (function(){

      var MyClass = function () {

          this.say = function() {
              alert('Num ' + this.someProperty);
              events.triggerHandler('eventCustom');
          }
      };

      return MyClass;

  })();

  TheClass = new MyClass();

  events.on('eventCustom', function() {
      alert('Event!');
  });
  events.on('eventCustom', function() {
      alert('Another Event!');
  });

  TheClass.say();