title: Adding and Removing Event Listeners with parameters
body: <p>I am writing a <strong>vanilla JavaScript</strong> tool, that when enabled adds event listeners to each of the elements passed into it.</p>
  
  <p>I would like to do something like this:</p>
  
  <pre><code>var do_something = function (obj) {
          // do something
      };
  
  for (var i = 0; i &lt; arr.length; i++) {
      arr[i].el.addEventListener('click', do_something(arr[i]));
  }
  </code></pre>
  
  <p>Unfortunately this doesn't work, because as far as I know, <em>when adding an event listener, parameters can only be passed into anonymous functions</em>:</p>
  
  <pre><code>for (var i = 0; i &lt; arr.length; i++) {
      arr[i].el.addEventListener('click', function (arr[i]) {
          // do something
      });
  }
  </code></pre>
  
  <p><strong>The problem is that I need to be able to remove the event listener when the tool is disabled, but I don't think it is possible to remove event listeners with anonymous functions</strong>.</p>
  
  <pre><code>for (var i = 0; i &lt; arr.length; i++) {
      arr[i].el.removeEventListener('click', do_something);
  }
  </code></pre>
  
  <p><em>I know I could easily use jQuery to solve my problem, but I am trying to minimise dependencies.</em> jQuery must get round this somehow, but the code is a bit of a jungle!</p>