javascript event listener for changes in an object variable

Question

I have an object variable that has several properties.

MyVar = {"prop1" : 0, "prop2": 0....};

How do I write an event listener that listens for a change in any of the properties.

Thanks for your suggestions.

Have you seen these? * http://stackoverflow.com/questions/1063813/listener-for-property-value-changes-in-a-javascript-object * http://stackoverflow.com/questions/240592/is-it-possible-to-listen-for-changes-to-an-objects-attributes-in-javascript * http://stackoverflow.com/questions/4138189/is-there-a-way-to-trigger-a-callback-when-an-object-creates-or-modifies-a-key-val * http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript — no.good.at.coding, May 02 '11 at 17:26

score 18 · Accepted Answer · answered May 02 '11 at 17:28

18

With ES5 you have setters:

var MyVar = {
  _prop1: 0,
  get prop1() { return this._prop1; },
  set prop1(value) { this._prop1 = value; /*Listener code can go here*/ }
};

answered May 02 '11 at 17:28

davin

41,227
7
73
77

There is also now the [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), too, which is a bit like getters and settings in that the consumer can just use normal assignment (`=`) and property access `object.property` or `object[propertyKey]` – iono Oct 13 '18 at 07:31

Richard Christensen · Answer 2 · 2015-05-15T16:37:20.620

If you want to fire off events when an objects variable changes, you could set up a small Observer pattern for that obj.

var MyVar = {
    prop1: "Foo",
    prop2: "Bar",
    events: {},

    setProp1: function(prop1) {
        this.prop1 = prop1;
        this.notify('prop1', this.prop1);
    },

    setProp2: function(prop2) {
        this.prop2 = prop2;
        this.notify('prop2', this.prop1);
    },

    addEvent: function(name) {
        if (typeof this.events[name] === "undefined") {
            this.events[name] = [];
        }
    },

    register: function(event, subscriber) {
        if (typeof subscriber === "object" && typeof subscriber.notify === 'function') {
            this.addEvent(event);
            this.events[event].push(subscriber);
        }
    },

    notify: function(event, data) {
        var events = this.events[event];
        for (var e in events) {
            events[e].notify(data);
        }
    }
};

var Prop1 = {
    notify: function() {
        alert('prop1 changed');
    }
};

var Prop2 = {
    notify: function() {
        alert('prop2 changed');
    }
};

$(document).ready(function(){
    MyVar.register('prop1',Prop1);
    MyVar.register('prop2',Prop2);

    MyVar.setProp1('New Var');
    MyVar.setProp2('New Var');
});

Usage instead of setting the object property directly you use a setter method which then fires off a notify event to other objects that are watching it.

JS FIDDLE

score 0 · Answer 3 · answered Jan 23 '14 at 12:26

I know this is an old question, but if you are doing this for debugging proposes, you can add a listener using your debugging tool at your browser same way you debug script.

Personally I'm using Firebug in Firefox, once opened, go to DOM tab, search for your variable, then (similarly to adding a breakpoints to script) add a breakpoints. It will break and scroll to the specific line of code that's going to process the change on the variable.

Check this out -> Firefox FIREBUG OR Google Chrome DEVELOPER TOOL

javascript event listener for changes in an object variable

3 Answers3

Linked