Ereignis-Listener entfernen, der mit bind hinzugefügt wurde

Was ist in JavaScript der beste Weg, um eine als Ereignis-Listener hinzugefügte Funktion mit bind () zu entfernen?

Beispiel

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

})();

Der einzige Weg, den ich mir vorstellen kann, besteht darin, jeden mit bind hinzugefügten Listener im Auge zu behalten.

Oberes Beispiel mit dieser Methode:

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

})();

Gibt es bessere Möglichkeiten, dies zu tun?

Obwohl das, was @machineghost sagte, wahr ist, dass Ereignisse auf dieselbe Weise hinzugefügt und entfernt werden, war der fehlende Teil der Gleichung folgender:

Nach dem .bind()Aufruf wird eine neue Funktionsreferenz erstellt !

Siehe Ändert bind () die Funktionsreferenz? | Wie dauerhaft einstellen?

Um es hinzuzufügen oder zu entfernen, weisen Sie den Verweis einer Variablen zu:

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

Das funktioniert bei mir wie erwartet.

Fügen Sie für diejenigen, die dieses Problem beim Registrieren / Entfernen des Listeners der React-Komponente zum / vom Flux-Speicher haben, die folgenden Zeilen zum Konstruktor Ihrer Komponente hinzu:

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

Es spielt keine Rolle, ob Sie eine gebundene Funktion verwenden oder nicht. Sie entfernen es wie jeden anderen Ereignishandler. Wenn Ihr Problem darin besteht, dass die gebundene Version eine eigene eindeutige Funktion ist, können Sie entweder die gebundenen Versionen verfolgen oder die removeEventListenerSignatur verwenden, für die kein bestimmter Handler erforderlich ist (obwohl dadurch natürlich andere Ereignishandler desselben Typs entfernt werden ).

(Nebenbei bemerkt, addEventListenerfunktioniert nicht in allen Browsern. Sie sollten wirklich eine Bibliothek wie jQuery verwenden, um Ihre Ereignisverbindungen für Sie browserübergreifend durchzuführen. Außerdem verfügt jQuery über das Konzept von Ereignissen mit Namespace, die dies ermöglichen Sie müssen an "click.foo" binden. Wenn Sie das Ereignis entfernen möchten, können Sie jQuery mitteilen, dass "alle foo-Ereignisse entfernen", ohne den jeweiligen Handler kennen oder andere Handler entfernen zu müssen.)

jQuery-Lösung:

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

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

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

Wir hatten dieses Problem mit einer Bibliothek, die wir nicht ändern konnten. Office Fabric-Benutzeroberfläche, was bedeutete, dass wir die Art und Weise, wie Ereignishandler hinzugefügt wurden, nicht ändern konnten. Die Art und Weise, wie wir es gelöst haben, bestand darin, addEventListenerden EventTargetPrototyp zu überschreiben .

Dadurch wird eine neue Funktion für Objekte hinzugefügt element.removeAllEventListers("click")

(Originalbeitrag: Click-Handler aus Stoffdialog-Overlay entfernen )

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

Hier ist die Lösung:

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

kann über ES7 verwenden:

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

}

Wenn Sie 'onclick' wie oben vorgeschlagen verwenden möchten, können Sie Folgendes versuchen:

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

Ich hoffe, es hilft.

Es ist schon eine Weile her, aber MDN hat eine super Erklärung dafür. Das hat mir mehr geholfen als das Zeug hier.

MDN :: EventTarget.addEventListener - Der Wert von "this" im Handler

Es bietet eine großartige Alternative zur handleEvent-Funktion.

Dies ist ein Beispiel mit und ohne Bindung:

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
}

Ein Problem im obigen Beispiel ist, dass Sie den Listener nicht mit bind entfernen können. Eine andere Lösung ist die Verwendung einer speziellen Funktion namens handleEvent, um Ereignisse abzufangen: