How do I change the function in addEventListener.

//how do I turn this
button.addEventListener('click', test)
//into this
button.addEventListener('click', test2)

I am okay with using js libraries. I have an idea that I can use removeEventListener and then add another event listener but I don't know how to add an eventListener in javascript.

CodePudding user response：

To switch EventListeners on the button, you would do exactly as you suggested

button.addEventListener("click", test)

button.removeEventListener("click", test)

button.addEventListener("click, test2)

An EventListener is essentially one of two things.

1. A function that accepts an event object as an input parameter.
2. An object that has a handleEvent function that accepts an event object as an input parameter.

For test2 to be an EventListener, it would just need to be one of those two things.

Option 1: As a function

function test2(event) {
    console.log(event)
}

button.addEventListener("click", test2)

Option 2: As an object with a handleEvent function

const test2 = {
    "handleEvent": (event) => {
        console.log(event)
    } 
}

button.addEventListener("click", test2)

The documentation to support this can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/EventListener

CodePudding user response：

This can be done with delegation, just assign each time the function to a variable, then call the variable from callback, like this:

let fn = () => {
  alert('1');
  fn = () => alert('2');
};

button.addEventListener('click', function () {
  fn.apply(this, arguments);
});

<button id="button">OK</button>