title: Removing event listener which was added with bind
body: <p>In JavaScript, what is the best way to remove a function added as an event listener using bind()?</p>
  
  <p>Example</p>
  
  <pre><code>(function(){
  
      // constructor
      MyClass = function() {
          this.myButton = document.getElementById("myButtonID");
          this.myButton.addEventListener("click", this.clickListener.bind(this));
      };
  
      MyClass.prototype.clickListener = function(event) {
          console.log(this); // must be MyClass
      };
  
      // public method
      MyClass.prototype.disableButton = function() {
          this.myButton.removeEventListener("click", ___________);
      };
  
  })();
  </code></pre>
  
  <p>The only way I can think of is to keep track of every listener added with bind.</p>
  
  <p>Above example with this method:</p>
  
  <pre><code>(function(){
  
      // constructor
      MyClass = function() {
          this.myButton = document.getElementById("myButtonID");
          this.clickListenerBind = this.clickListener.bind(this);
          this.myButton.addEventListener("click", this.clickListenerBind);
      };
  
      MyClass.prototype.clickListener = function(event) {
          console.log(this); // must be MyClass
      };
  
      // public method
      MyClass.prototype.disableButton = function() {
          this.myButton.removeEventListener("click", this.clickListenerBind);
      };
  
  })();
  </code></pre>
  
  <p>Are there any better ways to do this?</p>