Remove EventListener in JavaScript after event occurred?

Question

There are 24 div-objects waiting/listening for a mouse-click. After click on one div-object, I want to remove the EventListener from all 24 div-objects.

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener()//Problem lies here
        }

        //Some other code to be run after mouseclick

        },false);

}

The problem is that the removeEventListener is nested in addEventListener and I need to define type, listener, caption as attributes to the removeEventListener method. And I think it is impossible to define the listener because of nesting.

I also tried to define a function name, but it didn't worked:

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function helpme(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener('click',helpme,false);
        }

        //Some other code to be run after mouseclick

        },false);

}

Theodor Peifer · Accepted Answer · 2022-12-09 16:05:16Z

55

You can tell the event listener to simply fire just once:

document.addEventListener("click", (e) => {
            // function which to run on event
}, { once: true });

The documentation says:

once: A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

edited Dec 9, 2022 at 16:05

answered Nov 18, 2021 at 18:34

Theodor Peifer

3,5464 gold badges22 silver badges34 bronze badges

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

2 Comments

noblerare Over a year ago

As of 2021, this is the correct answer.

jimmymcheung Over a year ago

Is there a way to remove the listener not after firing, but when the if condition is met? (like addEventListener('action', function () { if (sth) {code; removeListener});

Jani Hartikainen · Accepted Answer · 2010-09-16 05:35:19Z

16

It should work with a named function. If your second approach does not work properly, try storing the initial listener into a variable, like this:

var handler = function(event) {
    for(...) {
        removeEventListener('click', handler, false);
    }
};

addEventListener('click', handler, false);

Ps. if you care about speed, you may wish to consider using just one event handler. You can put the handler into the parent element of the divs, and then delegate the event from there. With 24 handlers your current approach probably doesn't have a very big performance hit, but this is something you should keep in mind if it ever feels slow.

answered Sep 16, 2010 at 5:35

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

4 Comments

einstein Over a year ago

Hi Jani! It worked! I wanna thank you so much! I tried to figur out all day long without any success

MikeM Over a year ago

Old topic, but for some reason this wasn't working for me. An alternative that worked for me (to stop the event listener) was to set the event listener to an empty function.

codingbryan Over a year ago

Hi Jani, how is it that you can call handler in the removeEventListener when defining handler? It seems circular to me, but I'm misunderstanding something obviously!

holem Over a year ago

The third parameter (useCapture) is optional and false by default, so it does not require specifying.

celsowm · Accepted Answer · 2022-05-12 18:26:49Z

5

For those who needs to remove after a certain condition (or even inside a loop too), one alternative is using AbortController and AbortSignal:

const abortController = new AbortController();

let handler = function(event) {
    if(...) {
        abortController.abort();
    }
};

addEventListener('click', handler, {signal: abortController.signal});

edited May 12, 2022 at 18:26

answered May 12, 2022 at 17:48

celsowm

47410 gold badges43 silver badges64 bronze badges

Comments

Nguyễn Lê Anh Minh · Accepted Answer · 2022-02-02 17:34:33Z

-3

The same answer:

element.addEventListener("click", (e) => {
  // function which to run on event 
}, { once: true });

You can read more here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

answered Feb 2, 2022 at 17:34

Nguyễn Lê Anh Minh

1

1 Comment

Lang Minh Nguyên Over a year ago

Don't repeat other people's answers

Collectives™ on Stack Overflow

Remove EventListener in JavaScript after event occurred?

4 Answers 4

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Collectives™ on Stack Overflow

Remove EventListener in JavaScript after event occurred?

4 Answers 4

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related