0

In JavaScript, how can I remove an event listener that was added using an arrow function with parameters?

class myClass {

    animateIn(callback) {

        // Add an event listener for the end of the animation
        this.myDomElement.addEventListener(
            'animationend',
            (e) => this.onAnimateInAnimationEnd(e, callback)
        );
    }

    onAnimateInAnimationEnd = (e, callback) => {

         // Remove the event listener for the end of the animation
        this.myDomElement.removeEventListener(
            'animationend',
            (e) => this.onAnimateInAnimationEnd(e, callback)
        );
    }
}

I understand that using this.onAnimateInAnimationEnd instead of (e) => this.onAnimateInAnimationEnd(e, callback) will remove the event listener correctly. However, that does not allow me to access the callback parameter inside onAnimateInAnimationEnd.

How do I make it work with both e, which is related to the event I am listening to, and callback, which is not related to that event?

Ben
  • 15,938
  • 19
  • 92
  • 138
  • create a function (it can be an arrow function - actually, scratch that, it can't) and use that ... because `() => {}` `!==` `() => {}` – Bravo Apr 21 '22 at 10:38
  • But how do I make it work with both `e`, which is related to the event I am listening to, and `callback`, which is not related to that event? – Ben Apr 21 '22 at 10:41
  • Perhaps like this https://pastebin.com/A3Wa1fPh – Bravo Apr 21 '22 at 11:04

0 Answers0