title: Vanilla JavaScript - Unbind
body: <p>I have the following code which looks for a click event for all td elements:</p>
  
  <pre><code>[].forEach.call(document.querySelectorAll('td'), function(e) {
      e.addEventListener('click', function(event) {
          var clicked = [];
          clicked.push(event.target.parentNode.getAttribute('data-a'));
          clicked.push(event.target.getAttribute('data-b'));
          this.callEvent(clicked, event.target);
      }.bind(this));
  }.bind(this));
  </code></pre>
  
  <p>Then I have a basic if else statement that checks the data attrs. It appears like the click function is staying bound as in the if statement I have logged to the console which condition is true.
  After the very first run through, the true condition only runs, then if the next run through, the false runs, the true does also.. and then each time after, the conditions runs for each of the previous clicks.</p>
  
  <p>What am I doing wrong? Do I need to somehow unbind the click function each time?</p>