纯 Javascript 对象上的 jQuery.bind() 事件答案

【问题标题】：jQuery.bind() events on plain Javascript objects纯 Javascript 对象上的 jQuery.bind() 事件
【发布时间】：2012-02-01 16:37:18
【问题描述】：

是否可以将 jQuery 事件绑定到普通的非 DOM Javascript 对象：

var myobject = {};
$(myobject).bind("foobar", function() { alert("daa"); });

$(myobject).trigger("foobar");

有什么影响

垃圾收集（没有创建新的引用阻止对象被 GC'ed）
对象属性（分配给对象的新属性）？
性能

我注意到的一些事情

事件名称不得与对象上的函数名称冲突，例如您不能拥有名为 init 的函数 init 和事件并正确触发它

【问题讨论】：

你为什么要这样做？
如果你想要一个事件系统，我建议创建你自己的，或者使用一个用于典型 JS 对象的现有系统。它们不难写，而且会更具体到你想做的事情。
一个原因是实现超级简单的事件发射器：gist.github.com/1032342
如果可以使用 jQuery 事件系统，为什么还要编写自己的事件系统？
效果很好，包括 jQuery 3.5，但要注意：如果普通对象有方法 foobar，它也会被触发。实际上最好使用 triggerHandler 而不是 trigger：$(myobject).triggerHandler("foobar");

标签： javascript jquery

【解决方案1】：

我不会使用 jquery 事件系统，而是使用jQuery.Callbacks 方法来实现一个模仿它的系统。

var myClass = function(){
    this._callbacks = {};
};
myClass.prototype = {
  addEvent: function(evname,callback) {
    if (!this._callbacks[evname]) {
      this._callbacks[evname] = $.Callbacks();
    }
    this._callbacks[evname].add(callback);
  },
  removeEvent: function(evname) {
    if (!this._callbacks[evname]) {
      return;
    }
    this._callbacks[evname].remove();
    //Might need this too:
    //this._callbacks[evname] = null;
  },
  triggerEvent: function(evname) {
    if (this._callbacks[evname]) {
      this._callbacks[evname].fire();
    }
  }
};
var foo = new myClass();
foo.addEvent("foo",function(){
  console.log('foo');
});
foo.triggerEvent("foo");
foo.removeEvent("foo");
// event was removed, the below line won't do anything.
foo.triggerEvent("foo");

http://jsfiddle.net/kEuAP/

但是，为了回答您的问题，除了未记录在案并且可能会在版本之间更改功能（尽管它适用于所有当前可用的版本 1.2.6 +)。

【讨论】：

谢谢。回调对象对我来说是新的，可能是最合适的方法，使用辅助函数 callbackify(object)
我仍然不明白我为什么要实现自己的。
@Quickredfox 也许是因为 jQuery 事件系统不适用于普通对象？仅仅因为它现在有效并不意味着它以后会有效。
稍后会起作用。这个人自己这么说forum.jquery.com/topic/triggering-custom-events-on-js-objects :)
这只是坦率地说没有回答问题，如果功能已经存在，重新发明热水只是代码膨胀......

【解决方案2】：

看到 jQuery 也支持通过 animate 更改对象属性，这绝对没问题。

var obj = {'test':0}; 
var interval = setInterval(function(){console.log(obj);}, 250);
$(obj).on("fun", function(){this.test++});

$(obj).animate(
    {'test':100}, 
    3000, 
    function (){ 
        console.log(obj);
        clearInterval(interval);


        $(obj).trigger("fun")
        console.log("increment",obj); 
    }
);

//will console log {test: 1.5}, {test: 6.4} etc then {test: 100}
//and finally "interval" {test: 101}

Quickredfox 的备份评论也是一个很好的来源： http://forum.jquery.com/topic/triggering-custom-events-on-js-objects

【讨论】：