title: Pass additional arguments into javascript event
body: <p>I'm trying to use a JavaScript function with as an event handler for jQuery, but it needs one additional peice of information.  I tried adding it on to an object with the data, and using <code>this</code>, but <code>this</code> is null when it gets executed.  I believe this has something to do with function copying with in JavaScript.  How can I pass my extra info.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var WIDTH_ATTR = 'initWidth';
  
  function resizeHandler(event, ui){
      var change = ui.size.width - this.master.attr(WIDTH_ATTR);
      this.slave.width(slave.attr(WIDTH_ATTR) - change);
  };
  
  function splitResize(master, slave, masterHandles){
      var s = new SharedResize(master, slave);
      master.resizable({ handles: masterHandles, resize: s.resizeHandler }); 
  }
  
  function SharedResize(master, slave){
      this.master = master;
      this.slave = slave;
      this.resizeHandler = resizeHandler;
      master.attr(WIDTH_ATTR, master.width());
      slave.attr(WIDTH_ATTR, slave.width());
  }
  
  // initialise plugins
  $(function(){
      try {
          $('ul.sf-menu').superfish();
          splitResize($('#Content'), $('#InfoPanel'));
      }catch(ex){
          alert(ex.message);
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This code gives an error of </p>
  
  <pre>
  Line:13
  'this.master' is null or not an object.
  </pre>
  
  <p>When a resize is attempted.</p>
  
  <p>Can I make this scheme work, or is there another way to associate the event handler with my data.</p>