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

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

• javascript
• jquery

• Why would you want to do this? – James M Commented Feb 1, 2012 at 16:38
• If you wanted an event system, I'd suggest creating your own, or using an existing one that is meant for typical JS objects. They're not hard to write, and it will be more specific to what you want to do. – user1106925 Commented Feb 1, 2012 at 16:45
• 1 One reason is to implement super simple event emitter: gist.github.com/1032342 – esamatti Commented Feb 1, 2012 at 17:04
• 13 Why would I write my own event system if I could use jQuery event system? – Mikko Ohtamaa Commented Feb 1, 2012 at 18:05
• 1 Works nice, including jQuery 3.5 but with notice: if plain object has method foobar, it will be triggered too. Actually its better to use triggerHandler instead of trigger: $(myobject).triggerHandler("foobar"); – AndreyP Commented Jan 19, 2021 at 16:46

2 Answers 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+).

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