jQuery.bind() events on plain Javascript objects

Question

Is it ok to bind jQuery events to plain, non-DOM Javascript objects:

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

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

What are the implications for

• Garbage collection (no new references created preventing object to GC'ed)

• Object attributes (new attributes assigned to the object)?

• Performance

Some things I have noted

• Event name must not conflict with a function name on the object, e.g. you cannot have function init and event named init and trigger it correclty

Answer 1

Seeing as jQuery support alteration of object properties via animate also, this is definitely fine.

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's backup comment is a pretty good source too: http://forum.jquery.com/topic/triggering-custom-events-on-js-objects

Answer 2

Instead of using the jquery event system, I would implement one that mimics it using the jQuery.Callbacks method.

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/

---

However, to answer your question, I don't see any immediate problems with what you are doing other than it isn't documented and may change functionality from version to version (although it works in all currently available versions 1.2.6+).