How to run event listener only once?

Question

I have a button, which runs a event listener on click. But the event is running on each click. I want to run the event only once.

So I added a second button, which I want to use for removing the event listener. But this doesn't work, the event is running a few times. So when I press the run button 5 times for example, it runs the event 5 times.

I need to remove the event on clicking the remove button, to reset the event listener to 0.

Run event function:

setListenerOnClick() {
    this.window.addEventListener(this.testEvent, event => {
        console.log('Test ' + event);
    });

    this.window.addEventListener(this.test2Event, event => {
        console.log('Test 2 ' + event);
    });
}

Remove event function:

removeListener() {
    this.window.removeEventListener(this.testEvent, event);
    this.window.removeEventListener(this.test2Event, event);
}

Tried to add the function to a new function and replace the event with that function, but that didn't work. Adding the option 'once' is not an option because it's not working on IE11.

I want to run the event on clicking the run button, and clear/remove on clicking the remove button.

Any ideas?

Save a reference to the function you create (maybe `this.successEventHandler = event => { ...`), then you can use `removeEventListener` — CertainPerformance, Jan 07 '20 at 08:23
Every function you create, you should save a reference to - the one for `succesEvent` and the one for `failedEvent` — CertainPerformance, Jan 07 '20 at 08:27

How to run event listener only once?

0 Answers0