title: How do I add and remove an event listener using a function with parameters?
body: <p>Sorry if this is a common question, but I couldn't find any answers that seemed pertinent through searching.</p>
  
  <p>If I attach an event listener like this:</p>
  
  <pre><code>window.addEventListener('scroll', function() { check_pos(box); }, false);
  </code></pre>
  
  <p>it doesn't seem to work to try to remove it later, like this:</p>
  
  <pre><code>window.removeEventListener('scroll', function() { check_pos(box); }, false);
  </code></pre>
  
  <p>I assume this is because the <code>addEventListener</code> and <code>removeEventListener</code> methods want a reference to the same function, while I've provided them with anonymous functions, which, while identical in code, are not literally the same.</p>
  
  <p>How can I change my code to get the call to <code>removeEventListener</code> to work? The "box" argument refers to the name of an <code>&lt;iframe&gt;</code> that I'm tracking on the screen; that is, I want to be able to subscribe to the <code>scroll</code> event once for each <code>&lt;iframe&gt;</code> that I have (the quantity varies), and once the <code>check_pos()</code> function measures a certain position, it will call another function and also remove the event listener to free up system resources.</p>
  
  <p>My hunch is that the solution will involve a closure and/or naming the anonymous function, but I'm not sure exactly what that looks like, and would appreciate a concrete example.</p>
  
  <p>Hope that makes sense. </p>