Видалення слухача подій, доданого з прив’язкою

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

})();

Єдиний спосіб, про який я можу придумати, - це відслідковувати кожного слухача, доданого з прив’язкою.

Наведений вище приклад із цим методом:

(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 - значення "цього" в обробнику

Це дає чудову альтернативу функції 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
}

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