การลบฟังเหตุการณ์ที่ถูกเพิ่มเข้ามาด้วยการผูก

ใน 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()ถูกเรียก!

ดูการผูก () เปลี่ยนการอ้างอิงฟังก์ชันหรือไม่ | วิธีการตั้งค่าอย่างถาวร?

ดังนั้นหากต้องการเพิ่มหรือลบออกให้กำหนดการอ้างอิงกับตัวแปร:

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

ทำงานได้ตามที่คาดไว้สำหรับฉัน

สำหรับผู้ที่มีปัญหานี้ขณะลงทะเบียน / ลบผู้ฟังของ React component ไปยัง / จาก Flux store ให้เพิ่มบรรทัดด้านล่างลงใน Constructor ของ component ของคุณ:

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 UI ซึ่งหมายความว่าเราไม่สามารถเปลี่ยนวิธีเพิ่มตัวจัดการเหตุการณ์ วิธีที่เราแก้ไขมันคือเขียนทับ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
}

ปัญหาในตัวอย่างด้านบนคือคุณไม่สามารถลบ listener ด้วย bind โซลูชันอื่นใช้ฟังก์ชันพิเศษที่เรียกว่า handleEvent เพื่อตรวจจับเหตุการณ์ใด ๆ :