Proper way to expose events from JavaScript custom objects

Question

I have a custom object in JavaScript:

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

I instantiate this object via "new" and then pass it to other parts of my code that may need to keep track of changes to this object's properties.

When the properties of the Graph object are modified, I want all other consumers of that object to be notified. In languages like C# I would have a setter in which I would raise an event. What is a proper way to create events in custom JavaScript objects?

Are you using knockout or is that just a mis-tagging?

Sean Vieira
– Sean Vieira

2012-09-04 04:38:13 +00:00
Commented Sep 4, 2012 at 4:38 — Sean Vieira
– Sean Vieira, Commented Sep 4, 2012 at 4:38

sajawikio · Accepted Answer · 2013-02-10 18:08:37Z

3

Using JQuery, you can create and also attach events of any type to whatever object you want, at any time.

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

var g = new Graph;

g.dataType = "whatever1";
g.provider = "whatever2";
g.event = $.Event("mywhateverEvent");
g.myOwnProperty2 = $.Event("thisisAnEventToo");

Now you can manipulate your event further, doing whatever you want to that event, using something like:

g.event = <whateverCodeIWant>;
g.myOwnProperty2 = <whateverCodeIwant2>

Since you seem to like constructors, you can also do it like this:

function Graph (dataType, provider, evt){
   this.dataType = dataType;
   this.provider = provider;
   this.evt = evt
}

var myevt =  $.Event("whateverEvent");
myevt = <codeTomanipulatemyEventFurtherNowIfIWantTo>;
var g = new Graph("datawhatever", "providerwhatever", myevt);
$("whateverIWant").bind(myevt); 
//or whatever other binding - it will bind to that very event
$("whateverIWant").bind(g.evt);//equivalent to above line- binds to same event object

edited Feb 10, 2013 at 18:08

answered Sep 4, 2012 at 4:37

sajawikio

1,5147 silver badges12 bronze badges

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

2 Comments

user1044169 Over a year ago

What if multiple pieces of code want to subscribe to the same event on the same object. How would that be handled? Thanks.

sajawikio Over a year ago

See my reworked example. The Event object may be bound to, manipulated, etc. at any time, by any other object.

Community · Accepted Answer · 2017-05-23 12:20:11Z

1

Object.defineProperty is what you want (assuming you are all right with not supporting IE < 9 or Firefox < 4 on the desktop)

function Graph (dataType, provider){
   this._dataType = dataType;
   this._provider = provider;
}

Graph.prototype = {
    get dataType() {
        return this._dataType;
    },
    set dataType(data) {
        yourEventDispatcher.trigger("datatype modified");
        this._dataType = data;
    },
    get provider() {
        return this._provider;
    },
    set provider(data) {
        yourEventDispatcher.trigger("provider modified");
        this._provider = data;
    }
};

See also: Javascript getters and setters for dummies?

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Sep 4, 2012 at 4:44

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

3 Comments

sajawikio Over a year ago

I like this. Very nice. Just curious - what if I had like 50 properties - any way I could trigger that for any property change, or I have to define 50 setters?

Sean Vieira Over a year ago

@sajawikio - currently you would need to define 50 setters - there is a proposal in the works for an API to monitor all the properties of an object (Proxy) but it is in the draft phase at the moment.

user1044169 Over a year ago

Thanks. But IE < 9 is a problem in this case.

Femi · Accepted Answer · 2012-09-04 04:51:30Z

0

Use an EventEmitter library, such as https://github.com/Wolfy87/EventEmitter. The full guide is here, but in a nutshell you'd load the EventEmitter javascript file and then do something like this:

Graph.prototype = Object.clone(EventEmitter.prototype);

and after that you can do

var g = new Graph("Blah", "Blah");
g.emitEvent('foo');

answered Sep 4, 2012 at 4:51

Femi

64.8k8 gold badges120 silver badges150 bronze badges

1 Comment

Olical Over a year ago

Just bear in mind that Object.clone is a new method that isn't particularly cross browser. You can write your own cloning method or use a library pretty easily though. There are some great questions about cloning too.

Collectives™ on Stack Overflow

Proper way to expose events from JavaScript custom objects

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related