Loại bỏ trình nghe sự kiện đã được thêm bằng liên kết

Trong JavaScript, cách tốt nhất để loại bỏ một hàm được thêm vào như một trình lắng nghe sự kiện bằng cách sử dụng bind () là gì?

Thí dụ

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

})();

Cách duy nhất tôi có thể nghĩ đến là theo dõi mọi người nghe được thêm vào với ràng buộc.

Ví dụ trên với phương pháp này:

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

})();

Có cách nào tốt hơn để làm điều này?

Mặc dù những gì @machineghost nói là đúng, nhưng các sự kiện được thêm và xóa theo cùng một cách, phần còn thiếu của phương trình là:

Một tham chiếu chức năng mới được tạo sau khi .bind()được gọi!

Xem Liệu bind () thay đổi tham chiếu hàm? | Làm thế nào để thiết lập vĩnh viễn?

Vì vậy, để thêm hoặc xóa nó, gán tham chiếu cho một biến:

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

Điều này làm việc như mong đợi cho tôi.

Đối với những người gặp vấn đề này trong khi đăng ký / xóa trình nghe thành phần React đến / từ cửa hàng Flux, hãy thêm các dòng bên dưới vào hàm tạo của thành phần của bạn:

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

Không quan trọng bạn có sử dụng chức năng ràng buộc hay không; bạn loại bỏ nó giống như bất kỳ trình xử lý sự kiện nào khác. Nếu vấn đề của bạn là phiên bản bị ràng buộc là chức năng duy nhất của riêng nó, bạn có thể theo dõi các phiên bản bị ràng buộc hoặc sử dụngremoveEventListener chữ ký không có trình xử lý cụ thể (mặc dù tất nhiên sẽ loại bỏ các trình xử lý sự kiện khác cùng loại ).

(Như một lưu ý phụ, addEventListenerkhông hoạt động trong tất cả các trình duyệt; bạn thực sự nên sử dụng một thư viện như jQuery để thực hiện các kết nối sự kiện của mình theo cách trình duyệt chéo cho bạn. bạn liên kết với "click.foo"; khi bạn muốn xóa sự kiện, bạn có thể nói với jQuery "xóa tất cả các sự kiện foo" mà không cần phải biết trình xử lý cụ thể hoặc loại bỏ các trình xử lý khác.)

Giải pháp jQuery:

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

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

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

Chúng tôi đã có vấn đề này với một thư viện chúng tôi không thể thay đổi. Office Fabric UI, có nghĩa là chúng tôi không thể thay đổi cách xử lý sự kiện được thêm vào. Cách chúng tôi giải quyết nó là để ghi đè lên addEventListenertrênEventTarget nguyên mẫu.

Điều này sẽ thêm một chức năng mới trên các đối tượng element.removeAllEventListers("click")

(bài gốc: Xóa Trình xử lý nhấp chuột khỏi lớp phủ hộp thoại vải )

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

Đây là giải pháp:

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

có thể sử dụng khoảng 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() {
    // ...
  }

}

Nếu bạn muốn sử dụng 'onclick', như được đề xuất ở trên, bạn có thể thử điều này:

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

Tôi hy vọng nó sẽ giúp.

Đã được một lúc nhưng MDN có một lời giải thích siêu về điều này. Điều đó đã giúp tôi nhiều hơn những thứ ở đây.

MDN :: EventTarget.addEventListener - Giá trị của "this" trong trình xử lý

Nó cung cấp một sự thay thế tuyệt vời cho chức năng handleEvent.

Đây là một ví dụ có và không có ràng buộc:

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
}

Một vấn đề trong ví dụ trên là bạn không thể loại bỏ trình nghe bằng liên kết. Một giải pháp khác là sử dụng một chức năng đặc biệt gọi là handleEvent để nắm bắt bất kỳ sự kiện nào: