title: How do I add and remove an event listener using a function with event argument and parameters?
body: <p>For example, I have below function to execute when <code>mouseup</code> event occurs.</p>
  <pre><code>const listener = (element: HTMLElement, e: MouseEvent): void =&gt; {
      if (e.target instanceof Element &amp;&amp; element &amp;&amp; !element.contains(e.target)) {
          element.style.backgroundColor = 'red';
      }
  }
  </code></pre>
  <p>Then I am trying to figure out how to add extra paramter <code>element</code> to <code>listener</code> and remove it when it is not required anymore.</p>
  <pre><code>function addEventListener (element: HTMLElement) =&gt; {
      window.document.addEventListener('mouseup', (e) =&gt; listener(element, e));
  }
  
  function removeEventListener (element: HTMLElement) =&gt; {
      window.document.removeEventListener('mouseup', ?? );
  }
  </code></pre>
  <p>How can I solve this problem?</p>
  <p>I tried using bind like below, but <code>MouseEvent</code> cannot bind before <code>addEventListener</code>.</p>
  <pre><code>let callback;
  
  function addEventListener (element: HTMLElement) =&gt; {
      // how can I bind `MouseEvent`?
      callback = listener.bind(this, element, ??);
      window.document.addEventListener('mouseup', callback);
  }
  
  function removeEventListener (element: HTMLElement) =&gt; {
      window.document.removeEventListener('mouseup', callback);
  }
  </code></pre>
  <p>Should I use closure here like below?</p>
  <pre><code>function createListener(element: HTMLElement) {
      return (e: MouseEvent) =&gt; {
          listener(element, e);
      }
  }
  
  let callback;
  
  function addEventListener (element: HTMLElement) {
      callback = createListener(account);
      window.document.addEventListener('mouseup', callback);
  }
  
  function removeEventListener (element: HTMLElement) =&gt; {
      window.document.removeEventListener('mouseup', callback);
  }
  </code></pre>