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.
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.
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
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>