title: How can I programatically provide a JS event handler with references to additional HTML elements?
body: <p>Say, I have two HTML elements - an input field and a button.</p>
  
  <p>The code for both is generated programatically.</p>
  
  <p>After I generate the code, I have a function that binds event handlers to those elements.</p>
  
  <pre><code>//Locate add to order button and bind event handler to it
  this.input_add = document.getElementById("add_to_order");
  this.input_add.onclick = 
      function () {
          return controller.addToOrder.call(controller);
      };
  
  // Locate quantity input and bind event handler to it
  this.input_quantity = document.getElementById("form_quantity");
  this.input_quantity.onkeyup = 
      function () {
          return controller.changeQuantity.call(controller, this);
      };
  </code></pre>
  
  <p>Here's the puzzle - <strong>controller.changeQuantity</strong> requires a reference to <strong>this.input_add</strong>.</p>
  
  <p>As far as I can tell, I can't pass <strong>this.input_add</strong> into the call parameter list for <strong>controller.changeQuantity</strong>.</p>
  
  <p>I've found only one solution - putting a reference to <strong>this.input_add</strong> in the <strong>this.input_quantity</strong> object.</p>
  
  <pre><code>this.input_quantity.addButton = this.input_add
  </code></pre>
  
  <p>Are there any alternatives? Is this a good practice? I'm trying to keep my application as decoupled as possible.</p>