CODEWITHSUNDEEP
javascriptfunctionaddeventlistener
SomeOneOnEarthWhoLives
SomeOneOnEarthWhoLives

Reputation: 76

How to change the addEventListener callback function in javascript

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.

Upvotes: 1

Views: 1360

Answers (2)

Mackers
Mackers

Reputation: 1050

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

Upvotes: 2

n--
n--

Reputation: 3856

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>

Upvotes: 1

Related Questions