Usuwanie detektora zdarzeń, który został dodany za pomocą bind

Jaki jest najlepszy sposób na usunięcie funkcji dodanej jako detektor zdarzeń za pomocą bind () w JavaScript?

Przykład

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

})();

Jedynym sposobem, jaki przychodzi mi do głowy, jest śledzenie każdego słuchacza dodanego za pomocą bind.

Powyższy przykład z tą metodą:

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

})();

Czy są na to lepsze sposoby?

Chociaż to, co powiedział @machineghost, było prawdą, zdarzenia są dodawane i usuwane w ten sam sposób, brakująca część równania wyglądała tak:

Po wywołaniu zostanie utworzone nowe odwołanie do funkcji .bind()!

Zobacz Czy bind () zmienia odwołanie do funkcji? | Jak ustawić na stałe?

Aby więc ją dodać lub usunąć, przypisz odwołanie do zmiennej:

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

To działa zgodnie z oczekiwaniami dla mnie.

Dla tych, którzy mają ten problem podczas rejestracji / usuwania nasłuchiwania komponentu React do / ze sklepu Flux, dodaj poniższe linie do konstruktora komponentu:

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() {
    // ...
  }
  
}

Nie ma znaczenia, czy używasz funkcji związanej, czy nie; usuwasz go w taki sam sposób, jak każdy inny program obsługi zdarzeń. Jeśli Twoim problemem jest to, że powiązana wersja jest własną unikalną funkcją, możesz albo śledzić powiązane wersje, albo użyć removeEventListenerpodpisu, który nie przyjmuje określonej procedury obsługi (chociaż oczywiście spowoduje to usunięcie innych programów obsługi zdarzeń tego samego typu ).

(Na marginesie, addEventListenernie działa we wszystkich przeglądarkach; naprawdę powinieneś używać biblioteki, takiej jak jQuery, do podłączania zdarzeń w sposób między przeglądarkami. Ponadto jQuery ma koncepcję zdarzeń w przestrzeni nazw, która umożliwia możesz powiązać się z „click.foo”; kiedy chcesz usunąć zdarzenie, możesz powiedzieć jQuery „usuń wszystkie zdarzenia foo” bez konieczności znajomości konkretnego modułu obsługi lub usuwania innych funkcji obsługi).

Rozwiązanie jQuery:

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

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

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

Mieliśmy ten problem z biblioteką, której nie mogliśmy zmienić. Office Fabric UI, co oznaczało, że nie mogliśmy zmienić sposobu, w jaki zostały dodane programy obsługi zdarzeń. Sposób, w jaki to rozwiązaliśmy, polegał na nadpisaniu addEventListenerna EventTargetprototypie.

Spowoduje to dodanie nowej funkcji do obiektów element.removeAllEventListers("click")

(oryginalny post: Usuń uchwyt kliknięcia z nakładki okna dialogowego tkaniny )

        <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>

Oto rozwiązanie:

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

można użyć o 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() {
    // ...
  }

}

Jeśli chcesz użyć opcji „onclick”, jak zasugerowano powyżej, możesz spróbować tego:

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

Mam nadzieję, że to pomoże.

Minęło trochę czasu, ale MDN ma na to super wyjaśnienie. To pomogło mi bardziej niż rzeczy tutaj.

MDN :: EventTarget.addEventListener - wartość „this” w procedurze obsługi

Stanowi doskonałą alternatywę dla funkcji handleEvent.

Oto przykład z bindem i bez:

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
}

Problem w powyższym przykładzie polega na tym, że nie można usunąć nasłuchiwania za pomocą bind. Innym rozwiązaniem jest użycie specjalnej funkcji o nazwie handleEvent do przechwytywania zdarzeń: