title: Failed to store the reference of event handler (I want to remove the event listener)
body: <p>As the following code, when I click the &quot;play round&quot; button, it add an click event listener for each three options: <code>Rock</code>, <code>Paper</code> and <code>Scissors</code>. When they are ready, they turn to yellow.</p>
  <p>When player pick one of them, the event listener need to be removed (prevent from miss click again).</p>
  <p>According to this answer <a href="https://stackoverflow.com/a/3107221/3043719">Removing an anonymous event listener</a>, I store the event handler reference when creating the event listener. It doesn't work. In the following code, we still can pick all three options.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const playerSelection = function(selected, selections) {
      selected.id = 'selected';
      selections.forEach((selection) =&gt; {
          selection.classList.remove('listening');
          // get the anonymous event handler by cached reference
          selection.removeEventListener('click', selection.clickHandler, false);
      }); 
  }
  
  const playRound = function() {
      const selections = document.querySelectorAll(".selection");
      selections.forEach((selection) =&gt; {
          selection.id = undefined;
          selection.classList.add('listening');
          selection.addEventListener('click', function clicked() {
              // trying to store the reference of event handler
              selection.clickHandler = clicked; 
              playerSelection(selection, selections);
          }, false);
      });
  };
  
  const round = document.querySelector(".round");
  round.addEventListener('click', playRound);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.selection,
  .round {
      width: 100px;
      height: 50px;
      border: 1px solid black;
      background-color: white;
  }
  
  .selection.listening {
      background-color: yellow;
  }
  
  #selected {
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div data-name="Rock" class="selection"&gt;Rock&lt;/div&gt;
      &lt;div data-name="Paper" class="selection"&gt;Paper&lt;/div&gt;
      &lt;div data-name="Scissors" class="selection"&gt;Scissors&lt;/div&gt;
      &lt;div class="round"&gt;Play a round&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The event listener was not removed. Debugging tool showed the <code>selection.clickHandler</code> property is <code>undefined</code> when <code>playerSelection</code> is called.
  <a href="https://i.stack.imgur.com/zYQg7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zYQg7.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/pVtay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pVtay.png" alt="enter image description here" /></a></p>
  <p>When I go back to <code>playRound</code> function, I'm sure that <code>selection.clickHandler</code> attribute  well setted.
  <a href="https://i.stack.imgur.com/uWaGJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uWaGJ.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/k1Rq4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k1Rq4.png" alt="enter image description here" /></a></p>
  <p>Anyone knows what's wrong?</p>