普通Javascript对象上的jQuery.bind()事件

时间:2012-02-01 16:37:19

标签: javascript jquery

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

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

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

有什么影响
  • 垃圾收集(没有创建新的引用来阻止GC对象)

  • 对象属性(分配给对象的新属性)?

  • 效果

我注意到的一些事情

  • 事件名称不得与对象上的函数名称冲突,例如你不能有函数init和事件名为init并触发它correclty

2 个答案:

答案 0 :(得分:14)

我没有使用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 +)。

答案 1 :(得分:3)

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

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