Suppression de l'écouteur d'événements qui a été ajouté avec bind

En JavaScript, quel est le meilleur moyen de supprimer une fonction ajoutée en tant qu'écouteur d'événements à l'aide de bind ()?

Exemple

(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 seule façon dont je peux penser est de garder une trace de chaque auditeur ajouté avec bind.

Exemple ci-dessus avec cette méthode:

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

})();

Existe-t-il de meilleures façons de procéder?

Bien que ce que @machineghost ait dit soit vrai, que les événements sont ajoutés et supprimés de la même manière, la partie manquante de l'équation était la suivante:

Une nouvelle référence de fonction est créée après avoir .bind()été appelée!

Voir Est - ce que bind () change la référence de la fonction? | Comment définir définitivement?

Donc, pour l'ajouter ou le supprimer, assignez la référence à une variable:

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

Cela fonctionne comme prévu pour moi.

Pour ceux qui rencontrent ce problème lors de l'enregistrement / de la suppression de l'auditeur du composant React dans / du magasin Flux, ajoutez les lignes ci-dessous au constructeur de votre composant:

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

Peu importe que vous utilisiez une fonction liée ou non; vous le supprimez de la même manière que tout autre gestionnaire d'événements. Si votre problème est que la version liée est sa propre fonction unique, vous pouvez soit garder une trace des versions liées, soit utiliser la removeEventListenersignature qui ne prend pas de gestionnaire spécifique (bien que cela supprimera bien sûr d'autres gestionnaires d'événements du même type ).

(En remarque, addEventListenercela ne fonctionne pas dans tous les navigateurs; vous devriez vraiment utiliser une bibliothèque comme jQuery pour faire vos connexions d'événements de manière inter-navigateurs pour vous. De plus, jQuery a le concept d'événements à espaces de noms, qui permettent vous devez vous lier à "click.foo"; lorsque vous voulez supprimer l'événement, vous pouvez dire à jQuery "supprimer tous les événements foo" sans avoir à connaître le gestionnaire spécifique ou à supprimer d'autres gestionnaires.)

Solution jQuery:

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

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

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

Nous avons eu ce problème avec une bibliothèque que nous ne pouvions pas changer. Interface utilisateur d'Office Fabric, ce qui signifiait que nous ne pouvions pas modifier la façon dont les gestionnaires d'événements étaient ajoutés. La façon dont nous l'avons résolu a consisté à écraser le addEventListenersur le EventTargetprototype.

Cela ajoutera une nouvelle fonction sur les objets element.removeAllEventListers("click")

(article d'origine: Supprimer le gestionnaire de clic de la superposition de la boîte de dialogue de tissu )

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

Voici la solution:

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

peut utiliser environ 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 vous souhaitez utiliser 'onclick', comme suggéré ci-dessus, vous pouvez essayer ceci:

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

J'espère que cela aide.

Cela fait longtemps mais MDN a une super explication à ce sujet. Cela m'a aidé plus que les trucs ici.

MDN :: EventTarget.addEventListener - La valeur de "this" dans le gestionnaire

Il offre une excellente alternative à la fonction handleEvent.

Voici un exemple avec et sans liaison:

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 problème dans l'exemple ci-dessus est que vous ne pouvez pas supprimer l'écouteur avec bind. Une autre solution consiste à utiliser une fonction spéciale appelée handleEvent pour intercepter tous les événements: