title: Listen to a mouse event on condition
body: <p>I want to "listen to" a mouse event only if a checkbox is clicked. Therefore I have the following code: </p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;input type="checkbox" id="magicLens" onchange="magicLens()"&gt;
  &lt;label for="magicLens"&gt;Magic Lens&lt;/label&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function magicLens(){
    const magicLens_checked = document.getElementById('magicLens').checked;
  
    if (magicLens_checked === true){
        canvas.addEventListener('mousemove', e =&gt; {
           myAnonymous = arguments.callee;
           ...
           // draw something at the current mouse position
           // and therefore use the 'e' event object
      });
    }
    else {
        canvas.removeEventListener('mousemove', myAnonymous);
    }
  }
  </code></pre>
  
  <p>Problem is, that the drawing (a lens) also occurs when the checkbox is not checked (<code>false</code>). I'm not even sure if <code>removeEventListener()</code> is the right way to deal with it (though I already tried the whole thing without it and result was the same). </p>
  
  <p>Maybe you have a better idea to describe the issue in the title. Feel free to edit!</p>