Удаление прослушивателя событий, который был добавлен с помощью bind

В JavaScript, каков наилучший способ удалить функцию, добавленную в качестве прослушивателя событий, с помощью bind ()?

пример

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

})();

Единственный способ, о котором я могу думать, - это отслеживать каждого слушателя, добавленного с помощью bind.

Пример выше с этим методом:

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

})();

Есть ли лучшие способы сделать это?

Хотя то, что сказал @machineghost, было правдой, события добавляются и удаляются одинаково, но отсутствующей частью уравнения было следующее:

Новая ссылка на функцию создается после .bind()вызова!

См. Bind () изменяет ссылку на функцию? | Как установить постоянно?

Итак, чтобы добавить или удалить его, присвойте ссылку на переменную:

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

Это работает, как и ожидалось для меня.

Для тех, у кого есть эта проблема при регистрации / удалении слушателя компонента React в / из хранилища Flux, добавьте строки ниже в конструктор вашего компонента:

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

Неважно, используете ли вы связанную функцию или нет; вы удаляете его так же, как и любой другой обработчик событий. Если ваша проблема заключается в том, что связанная версия представляет собой собственную уникальную функцию, вы можете либо отслеживать связанные версии, либо использовать removeEventListenerподпись, которая не принимает определенный обработчик (хотя, конечно, это приведет к удалению других обработчиков событий того же типа). ).

(Как примечание: addEventListenerне работает во всех браузерах; вам действительно нужно использовать библиотеку, такую ​​как jQuery, чтобы выполнять привязки событий кросс-браузерным способом для вас. Кроме того, jQuery имеет концепцию событий в пространстве имен, которая позволяет вам нужно привязать к «click.foo»; когда вы хотите удалить событие, вы можете сказать jQuery «удалить все события foo» без необходимости знать конкретный обработчик или удалять другие обработчики.)

Решение jQuery:

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

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

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

У нас была эта проблема с библиотекой, которую мы не могли изменить. Пользовательский интерфейс Office Fabric, что означало, что мы не могли изменить способ добавления обработчиков событий. То, как мы решили это, было переписать addEventListenerна EventTargetпрототипе.

Это добавит новую функцию на объекты element.removeAllEventListers("click")

(Исходное сообщение: Удалить обработчик кликов из наложения диалогового окна ткани )

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

Вот решение:

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

можно использовать про 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() {
    // ...
  }

}

Если вы хотите использовать «onclick», как предложено выше, вы можете попробовать это:

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

Я надеюсь, что это помогает.

Это было некоторое время, но у MDN есть супер объяснение этому. Это помогло мне больше, чем вещи здесь.

MDN :: EventTarget.addEventListener - значение this в обработчике

Это дает отличную альтернативу функции handleEvent.

Это пример с и без привязки:

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
}

Проблема в приведенном выше примере заключается в том, что вы не можете удалить слушателя с помощью bind. Другое решение - использовать специальную функцию handleEvent для перехвата любых событий: