类中可重用的事件侦听器回调

Question

I write code in pure JS and I need to have reusable callback for my event listener within the class. It is required to meet following:

• reusable by another functions
• event listener needs to be revocable by another functions
• I need to pass argument (event)
• I need to be possible to call another function from the callback (this.doSomething())

I tried define callback as method and also as function expression but every time I solve one issue another occurred. I have walked through many questions here too but still can not make my code to work.

class Foo {

    constructor() {
        functionA()

        this.howAndWhereToDefineThisCallback = function(event) {
            event.preventDefault();
            this.doSomething();
        }
    }



    functionA() {
        let el = document.getElementById('element1');

        el.addEventListener( 'click', howAndWhereDefineThisCallback );

        this.functionB();
    }



    functionB() {
        let el = document.getElementById('element1');

        el.removeEventListener( 'click', howAndWhereToDefineThisCallback );
    }



    doSomething() {
        // something meaningful
    }
}

How can I modify my code to use it the way I just described?

Answer 1

Here you have an implementation:

 // Callback defined outside the class. function callback(event) { this.doSomething(); } class Foo { constructor(cb) { // Important: You have to bind it. this.cb = cb.bind(this); this.functionA(); } functionA() { let el = document.getElementById('element1'); el.addEventListener('click', this.cb); } functionB() { let el = document.getElementById('element1'); el.removeEventListener('click', this.cb); } doSomething() { console.log('doing something...'); } } const foo = new Foo(callback); // foo.functionB(); 

 <button id="element1"> Click here </button> 

Answer 2

If you want to reuse your callback function, simply put it outside of your class scope. In order to call another function from your callback, just put that function as a argument of your callback, for example:

var howAndWhereToDefineThisCallback = function(event, anotherCallback) {
        event.preventDefault();
        if (anotherCallback) anotherCallback();
}

To use the callback in your class method:

el.removeEventListener( 'click', function(event) {
   howAndWhereToDefineThisCallback(event, this.doSomething);
});