Menghapus pendengar acara yang ditambahkan dengan bind

Dalam JavaScript, apa cara terbaik untuk menghapus fungsi yang ditambahkan sebagai pendengar acara menggunakan bind ()?

Contoh

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

})();

Satu-satunya cara yang bisa saya pikirkan adalah melacak setiap pendengar yang ditambahkan dengan bind.

Contoh di atas dengan metode ini:

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

})();

Apakah ada cara yang lebih baik untuk melakukan ini?

Meskipun apa yang dikatakan @machineghost benar, bahwa peristiwa ditambahkan dan dihapus dengan cara yang sama, bagian persamaan yang hilang adalah sebagai berikut:

Referensi fungsi baru dibuat setelah .bind()disebut!

Lihat Apakah bind () mengubah referensi fungsi? | Bagaimana cara mengatur secara permanen?

Jadi, untuk menambah atau menghapusnya, tetapkan referensi ke variabel:

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

Ini berfungsi seperti yang diharapkan untuk saya.

Bagi mereka yang memiliki masalah ini saat mendaftar / menghapus pendengar komponen Bereaksi ke / dari toko Flux, tambahkan baris di bawah ini ke konstruktor komponen Anda:

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

Tidak masalah apakah Anda menggunakan fungsi terikat atau tidak; Anda menghapusnya dengan cara yang sama seperti pengendali acara lainnya. Jika masalah Anda adalah bahwa versi terikat adalah fungsi uniknya sendiri, Anda dapat melacak versi terikat, atau menggunakan removeEventListenertanda tangan yang tidak mengambil penangan tertentu (walaupun tentu saja itu akan menghapus penangan acara lainnya dari jenis yang sama ).

(Sebagai catatan, addEventListenertidak berfungsi di semua browser; Anda benar-benar harus menggunakan perpustakaan seperti jQuery untuk melakukan hook-up acara Anda dengan cara lintas-browser untuk Anda. Juga, jQuery memiliki konsep acara dengan namespace, yang memungkinkan Anda mengikat "click.foo"; ketika Anda ingin menghapus acara, Anda dapat memberi tahu jQuery "hapus semua acara foo" tanpa harus mengetahui penangan spesifik atau menghapus penangan lainnya.)

solusi jQuery:

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

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

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

Kami memiliki masalah dengan perpustakaan yang tidak dapat kami ubah. Office Fabric UI, yang berarti kami tidak bisa mengubah cara penangan acara ditambahkan. Cara kita dipecahkan itu untuk menimpa addEventListenerpada EventTargetprototipe.

Ini akan menambahkan fungsi baru pada objek element.removeAllEventListers("click")

(pos asli: Hapus handler Klik dari hamparan dialog kain )

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

Ini solusinya:

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

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

}

Jika Anda ingin menggunakan 'onclick', seperti yang disarankan di atas, Anda dapat mencoba ini:

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

Saya harap ini membantu.

Sudah beberapa saat tetapi MDN memiliki penjelasan super tentang ini. Itu membantu saya lebih daripada hal-hal di sini.

MDN :: EventTarget.addEventListener - Nilai "ini" dalam handler

Ini memberikan alternatif yang bagus untuk fungsi handleEvent.

Ini adalah contoh dengan dan tanpa ikatan:

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
}

Masalah dalam contoh di atas adalah bahwa Anda tidak dapat menghapus pendengar dengan bind. Solusi lain adalah menggunakan fungsi khusus yang disebut handleEvent untuk menangkap setiap peristiwa: