Eliminando el detector de eventos que se agregó con bind

En JavaScript, ¿cuál es la mejor manera de eliminar una función agregada como detector de eventos mediante bind ()?

Ejemplo

(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", ___________);
    };

})();

La única forma en que puedo pensar es hacer un seguimiento de cada oyente agregado con bind.

Ejemplo anterior con este método:

(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);
    };

})();

¿Hay alguna forma mejor de hacer esto?

Aunque lo que @machineghost dijo era cierto, que los eventos se agregan y eliminan de la misma manera, la parte faltante de la ecuación fue esta:

¡Se crea una nueva referencia de función después de que .bind()se llama!

Ver ¿Bind () cambia la referencia de función? El | ¿Cómo configurar permanentemente?

Entonces, para agregarlo o eliminarlo, asigne la referencia a una variable:

var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);

Esto funciona como se esperaba para mí.

Para aquellos que tienen este problema al registrar / eliminar el oyente del componente React a / desde la tienda Flux, agregue las líneas a continuación al constructor de su componente:

class App extends React.Component {
  constructor(props){
    super(props);
    // it's a trick! needed in order to overcome the remove event listener
    this.onChange = this.onChange.bind(this);  
  }
  // then as regular...
  componentDidMount (){
    AppStore.addChangeListener(this.onChange);
  }
  
  componentWillUnmount (){
    AppStore.removeChangeListener(this.onChange);
  }

  onChange () {
    let state = AppStore.getState();
    this.setState(state);
  }
  
  render() {
    // ...
  }
  
}

No importa si usa una función enlazada o no; lo elimina de la misma manera que cualquier otro controlador de eventos. Si su problema es que la versión enlazada es su propia función única, puede realizar un seguimiento de las versiones enlazadas o utilizar elremoveEventListener firma que no tiene un controlador específico (aunque, por supuesto, eliminará otros controladores de eventos del mismo tipo )

(Como nota al margen, addEventListenerno funciona en todos los navegadores; realmente debería usar una biblioteca como jQuery para hacer sus conexiones de eventos en un navegador cruzado para usted. Además, jQuery tiene el concepto de eventos con espacios de nombres, que permiten se debe vincular a "click.foo"; cuando desee eliminar el evento, puede decirle a jQuery "eliminar todos los eventos foo" sin tener que conocer el controlador específico o eliminar otros controladores).

Solución jQuery:

let object = new ClassName();
let $elem = $('selector');

$elem.on('click', $.proxy(object.method, object));

$elem.off('click', $.proxy(object.method, object));

Tuvimos este problema con una biblioteca que no pudimos cambiar. Office Fabric UI, lo que significa que no pudimos cambiar la forma en que se agregaron los controladores de eventos. La forma en que lo resolvimos fue sobrescribir addEventListenerel EventTargetprototipo.

Esto agregará una nueva función en los objetos element.removeAllEventListers("click")

(publicación original: Eliminar el controlador de clic de la superposición de diálogo de la tela )

        <script>
            (function () {
                "use strict";

                var f = EventTarget.prototype.addEventListener;

                EventTarget.prototype.addEventListener = function (type, fn, capture) {
                    this.f = f;
                    this._eventHandlers = this._eventHandlers || {};
                    this._eventHandlers[type] = this._eventHandlers[type] || [];
                    this._eventHandlers[type].push([fn, capture]);
                    this.f(type, fn, capture);
                }

                EventTarget.prototype.removeAllEventListeners = function (type) {
                    this._eventHandlers = this._eventHandlers || {};
                    if (type in this._eventHandlers) {
                        var eventHandlers = this._eventHandlers[type];
                        for (var i = eventHandlers.length; i--;) {
                            var handler = eventHandlers[i];
                            this.removeEventListener(type, handler[0], handler[1]);
                        }
                    }
                }

                EventTarget.prototype.getAllEventListeners = function (type) {
                    this._eventHandlers = this._eventHandlers || {};
                    this._eventHandlers[type] = this._eventHandlers[type] || [];
                    return this._eventHandlers[type];
                }

            })();
        </script>

Aquí está la solución:

var o = {
  list: [1, 2, 3, 4],
  add: function () {
    var b = document.getElementsByTagName('body')[0];
    b.addEventListener('click', this._onClick());

  },
  remove: function () {
    var b = document.getElementsByTagName('body')[0];
    b.removeEventListener('click', this._onClick());
  },
  _onClick: function () {
    this.clickFn = this.clickFn || this._showLog.bind(this);
    return this.clickFn;
  },
  _showLog: function (e) {
    console.log('click', this.list, e);
  }
};


// Example to test the solution
o.add();

setTimeout(function () {
  console.log('setTimeout');
  o.remove();
}, 5000);

puede usar sobre ES7:

class App extends React.Component {
  constructor(props){
    super(props);
  }
  componentDidMount (){
    AppStore.addChangeListener(this.onChange);
  }

  componentWillUnmount (){
    AppStore.removeChangeListener(this.onChange);
  }

  onChange = () => {
    let state = AppStore.getState();
    this.setState(state);
  }

  render() {
    // ...
  }

}

Si desea usar 'onclick', como se sugirió anteriormente, puede intentar esto:

(function(){
    var singleton = {};

    singleton = new function() {
        this.myButton = document.getElementById("myButtonID");

        this.myButton.onclick = function() {
            singleton.clickListener();
        };
    }

    singleton.clickListener = function() {
        console.log(this); // I also know who I am
    };

    // public function
    singleton.disableButton = function() {
        this.myButton.onclick = "";
    };
})();

Espero que ayude.

Ha pasado un tiempo, pero MDN tiene una súper explicación sobre esto. Eso me ayudó más que las cosas aquí.

MDN :: EventTarget.addEventListener - El valor de "this" dentro del controlador

Da una gran alternativa a la función handleEvent.

Este es un ejemplo con y sin enlace:

var Something = function(element) {
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // undefined, as this is the element
  };
  this.onclick2 = function(event) {
    console.log(this.name); // 'Something Good', as this is the binded Something object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}

Un problema en el ejemplo anterior es que no puede eliminar el oyente con bind. Otra solución es usar una función especial llamada handleEvent para capturar cualquier evento: