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

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
– user1106925, Commented Feb 1, 2012 at 16:45
One reason is to implement super simple event emitter: gist.github.com/1032342 — esamatti
– esamatti, Commented Feb 1, 2012 at 17:04
Why would I write my own event system if I could use jQuery event system? — Mikko Ohtamaa
– Mikko Ohtamaa, Commented Feb 1, 2012 at 18:05
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
– AndreyP, Commented Jan 19, 2021 at 16:46

user400654 · Accepted Answer · 2015-07-22 14:50:33Z

14

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

edited Jul 22, 2015 at 14:50

answered Feb 1, 2012 at 18:45

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mikko Ohtamaa Over a year ago

Thanks. Callbacks objects was new for me and probably the most suitable way to do this, using helper function callbackify(object)

Quickredfox Over a year ago

I nonetheless still fail to understand why I'd implement my own.

user400654 Over a year ago

@Quickredfox Maybe because the jQuery event system isn't meant for plain objects? Just because it works now doesn't mean it will work later.

Quickredfox Over a year ago

It WILL work later. The man himself says so forum.jquery.com/topic/triggering-custom-events-on-js-objects :)

user1115652 Over a year ago

This just frankly does not answer the question and if the functionality already exist, re-inventing hot water is just code bloat...

marksyzm · Accepted Answer · 2013-08-08 14:55:14Z

3

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

edited Aug 8, 2013 at 14:55

answered Aug 8, 2013 at 14:49

marksyzm

5,6412 gold badges32 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery.bind() events on plain Javascript objects

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related