Javascript : Replace Event Listener

Question

I am listening to an event and want to call different methods. For example, I am listening to animation end event and the code is something like this:

this.inAnimationCallback = function() {
    console.log('In');
    _this.elem.className = _this.settings.className;
};
this.outAnimationCallback = function() {
    console.log('Out');
    _this.elem.parentNode.removeChild(_this.elem);
};

this.elem.addEventListener(animationEvent, this.inAnimationCallback);

setTimeout(function() {
    _this.elem.addEventListener(animationEvent, _this.outAnimationCallback);
    // Call some animation here.
}, 3000);

What happens here is that instead of replacing the method attached to the event, JS adds the method and when animation ends, both methods are called. Console looks like this:

(2) In
Out

Well you have to call removeEventListener with the other method… — Bergi
– Bergi, Commented Jun 10, 2015 at 10:57
@Bergi It works! Fk, yeah. I had the idea of removeEventListener but I did something like: this.elem.removeEventListener(animationEvent);. It didn't work but now calling it by passing the method I want to remove results in proper working. Thanks. — Talha Akbar
– Talha Akbar, Commented Jun 10, 2015 at 11:01
@Bergi Would you like to add answer or should I remove the question? — Talha Akbar
– Talha Akbar, Commented Jun 10, 2015 at 11:01

Community · Accepted Answer · 2020-06-20 09:12:55Z

14

I'm writing this answer for those like me, who is just started learning JS. And this thread came up first in google to "js replace event listener".. Although, I am not disagreeing with the answers to use removeEventListener(), but mozilla warns that this function is not always successful. So use it with care. not willing to go that road i have found two other ways to do it.

Use something like GlobalEventHandlers which is simple as target.onclick = functionRef;. Mozilla even warns:

Only one onclick handler can be assigned to an object at a time.

Within listener function add external function call to action function, and then replace reference to another external action function. For example this code will call firstAction(), then seconAction(), then first again...:

    const buttonOne = document.getElementById('buttonOne');
    buttonOne.addEventListener('click', listenerFunction);

    let doAction = firstAction; //assigning doAction to firstAction

    function listenerFunction() {
        doAction(); //external function call
    }
    function firstAction() {
        doAction = secondAction; //assigning doAction to secondAction
        console.log('first action clicked');
    }
    function secondAction() {
        doAction = firstAction; //assigning doAction to firstAction
        console.log('second action clicked');
    }

    <button type="button" id="buttonOne" name="button">button1</button>

I wrote this answer to broaden solution scope: would have saved at least 6 hours of my time. If I had this in the first place...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 11, 2020 at 12:32

arty marty

3213 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Talha Akbar Over a year ago

I have reviewed your answer and found it to be good enough to be accepted. Nice explanation with references!

arty marty Over a year ago

thank you for compliment. i just hope this would help someone.

Remy Grandin · Accepted Answer · 2015-06-10 11:02:05Z

2

You can just remove the event listener before adding the new one :

setTimeout(function() {
    _this.elem.removeEventListener(animationEvent, _this.inAnimationCallback);
    _this.elem.addEventListener(animationEvent, _this.outAnimationCallback);
    // Call some animation here.
}, 3000);

answered Jun 10, 2015 at 11:02

Remy Grandin

1,5961 gold badge14 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript : Replace Event Listener

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related