CODEWITHSUNDEEP
javascriptevent-handlingdom-events
user1044169
user1044169

Reputation: 2866

Proper way to expose events from JavaScript custom objects

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?

Upvotes: 5

Views: 1796

Answers (3)

sajawikio
sajawikio

Reputation: 1514

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

Upvotes: 3

Femi
Femi

Reputation: 64700

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');

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159885

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?

Upvotes: 1

Related Questions