title: Javascript: bind arguments, but keep original ones?
body: <p>I would like to inject some values to event listener's callback in JavaScript, but keeping the original event object. Is that possible?</p>
  
  <p>Example (#1):</p>
  
  <pre><code>function callback(event, arg) {
      console.log(event);
      console.log(arg);
  }
  
  var something = 2;
  
  element.addEventListener(
      "click",
      callback.bind(element, ???, something)
  );
  </code></pre>
  
  <p>How can I keep original <code>event</code> object while binding another arguments?</p>
  
  <p>I know I can do this (#2):</p>
  
  <pre><code>element.addEventListener(
      "click",
      function (event) {
          callback(event, something);
      }
  );
  </code></pre>
  
  <p>Or even this (#3):</p>
  
  <pre><code>element.addEventListener(
      "click",
      function (event) {
          callback(event, this);
      }.bind(something)
  );
  </code></pre>
  
  <p>But #2 makes the code uglier, because I need to use variable <code>something</code> in asynchronous call, while it could have been changed at the moment of the click.</p>
  
  <p>The #3 steals <code>this</code> and I might need that.</p>
  
  <p>Am I missing something and/or is my understanding of binding correct?</p>