title: How to add an eventListener to an Object in JavaScript which will fire when object is manipulated?
body: <p>I have a complicated UI structure which is manipulated dynamically, and say I have an <code>ui_state</code> object where i keep user's latest UI states such as which tab was visible, what was inside that tab etc.</p>
  <p>For instance:</p>
  <pre><code>var ui_states = {
    tabs : [
      {
        name     : &quot;some tab&quot;,
        active   : true,
        children : { ... }
      },
      {
        name     : &quot;some other tab&quot;,
        children : { ... }
      }
    ]
  }
  </code></pre>
  <p>I keep this on <code>html5 localStorage</code> and when user refreshes the site it reopens the page the same. Every time when the UI changes this object is changed accordingly. Just after changing it I need to run let's say <code>updateLocalStorage()</code> which is working perfectly.</p>
  <p>My question is for this flow, can I create a custom event to my <code>ui_states</code> object something like <code>ui_states.addEventListener('onchange', function(){ // do stuff })</code> to not to run that <code>updateLocalStorage()</code> function every time when I manipulate the object?</p>